插值表达式、v-text和v-html

最新推荐文章于 2024-01-03 15:23:10 发布

冰雪奇缘lb

最新推荐文章于 2024-01-03 15:23:10 发布

阅读量506

点赞数

分类专栏： Vue 文章标签： v-cloak、v-text和v-html

本文链接：https://blog.csdn.net/weixin_44682587/article/details/102845763

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-cloak、v-text和v-html

v-cloak

1.v-cloak和插值表达式结合使用
2.用来解决插值表达式的闪烁的问题
3.不覆盖元素中原本的内容
4.不能读取HTML标签

v-text

1.没有闪烁问题（网速慢导致）
2.会覆盖元素中原本的内容
3.不能读取HTML标签

v-html

1.会覆盖元素中原本的内容
2.能够读取HTML标签

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head> 
	<body>
		<div id = 'app'>
			<!--使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
			<p v-cloak>++++++++{{msg}}------</p>
			<h4 v-text = "msg">============</h4>
			<!-- v-text 是没有闪烁问题的 -->
			<!-- v- text会覆盖元素中原本的内容，但是  插值表达式  只会替换自己的这个占位符，
			不会把  整个元素的内容清空-->
			<div>{{msg2}}</div>
			<div v-html = "msg2"></div>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123',
					msg2:'<h1>哈哈我是一个大大的H1，我大，我骄傲</h1>'
				}
			})
		</script>
	</body>
</html>

运行结果

在这里插入图片描述

冰雪奇缘lb

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
插值表达式、v-text和v-html

v-cloak、v-text和v-htmlv-cloak1.v-cloak和插值表达式结合使用2.用来解决插值表达式的闪烁的问题3.不覆盖元素中原本的内容4.不能读取HTML标签v-text1.没有闪烁问题（网速慢导致）2.会覆盖元素中原本的内容3.不能读取HTML标签v-html1.会覆盖元素中原本的内容2.能够读取HTML标签代码实例：<!DOCTYPE ht...
复制链接

扫一扫