• 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

    在这里插入图片描述

  • 相关阅读:
    mfc 疑难杂症之一
    k8s：endpoint
    netmiko安装及使用
    线上一次JVM FullGC搞得整晚都没睡，彻底崩溃~
    valid ready握手无气泡
    基于Three.js实现三维空间中的箭头移动动画
    C++:回调函数的应用
    书生浦语大模型实战营---Linux 基础知识
    Xilinx约束学习笔记—— 时序约束
    自动驾驶系列（二）——环境感知之行人检测技术
  • 原文地址：https://blog.csdn.net/qq_38322527/article/details/125521261