• Vue 2.0——v-text、v-html使用

    文章目录

    前言

    再最初的{{message}}进行数据信息渲染时，能够动态地将文本内容动态地渲染至指定区域显示，如：

    <div id="app">{{message}}</div>

var app1 = new Vue({
	el:'#app', // 这里是指定元素dom节点，可以是id、class 或者 类似div标签等，注意不能是body、html标签！
	data:{
		message:'Hello Word，专注写bug!'
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    其中，VUE给开发者自动进行了类似ducument.getElementById("xxxx").value(xxxx)的封装和显示操作。

    这种对于数据值而言，是一次技术的提升，在前端js中还存在ducument.getElementById("xxxx").html(xxx)写法，动态地增加html表达式，进行画面的渲染，VUE也能实现。

    v-html 使用

    显示信息内容

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}} 
			<br/>
			<div v-html="htmlmsg"></div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript">
		var app1 = new Vue({
			el:'#app', // 这里是指定元素dom节点，可以是id、class 或者 类似div标签等，注意不能是body、html标签！
			data:{
				message:'Hello Word，专注写bug!',
				htmlmsg:'66666'
			}
		})
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述

    显示 html 语句

    如下所示，显示<div>拼接语句：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}} 
			<br/>
			<div v-html="htmlmsg"></div>
			<div v-html="htmlmsg2"></div>
			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript">
		var app1 = new Vue({
			el:'#app', // 这里是指定元素dom节点，可以是id、class 或者 类似div标签等，注意不能是body、html标签！
			data:{
				message:'Hello Word，专注写bug!',
				htmlmsg:'66666',
				htmlmsg2:"<div style='background-color: aquamarine;'>88888</div>"
			}
		})
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    v-text

    但是这里的v-text只能显示文本，无法动态地解析html表达式。如下所示：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}} 
			<br/>
			<div v-html="htmlmsg"></div>
			<div v-html="htmlmsg2"></div>
			<br/>
			<div v-text="htmlmsg"></div>
			<div v-text="htmlmsg2"></div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript">
		var app1 = new Vue({
			el:'#app', // 这里是指定元素dom节点，可以是id、class 或者 类似div标签等，注意不能是body、html标签！
			data:{
				message:'Hello Word，专注写bug!',
				htmlmsg:'66666',
				htmlmsg2:"<div style='background-color: aquamarine;'>88888</div>"
			}
		})
	</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

  • 相关阅读:
    Linux软件安装详解
    C语言基础篇 —— 3-3 关键字 typedef
    （2021|NIPS，VQ-VAE，精度瓶颈松弛，三明治层归一化，CapLoss）CogView：通过转换器掌握文本到图像的生成
    docker 安装 elasticsearch 7.3.0
    android jectpack DataBinding 数据绑定 改变ui的几种方式
    CSDN竞赛第五期竞赛-习题解析
    29岁才转行软件测试，目前32了，我的一些经历跟感受
    pytorch的mask-rcnn的模型参数解释
    Java面试题之synchronized关键字原理以及锁相关
    softmax交叉熵损失函数深入理解（二）
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125521261