Vue · v-cloak, v-text, v-html的用法

最新推荐文章于 2024-02-22 00:00:00 发布

_Mores

最新推荐文章于 2024-02-22 00:00:00 发布

阅读量143

点赞数

分类专栏：前端 · Vue 文章标签： vue

原文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063328

版权

前端 · Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

插值表达式闪烁问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p>{{ msg }}</p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123'
				}
			})
		</script>
	</body>
</html>

在刷新页面的时候可能会看到插值表达式，如下图：

F12, 去到Network，设置为Slow3G. 可能可以看到在vue.js请求过来之后，才会从{{ msg }} 显示为123

解决方法：

（1）v-cloak

等到Vue.js请求到之后才显示组件，否则组件处于display: none;状态.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<p v-cloak>{{ msg }}</p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123'
				}
			})
		</script>
	</body>
</html>

（2）v-text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
	</head>
	
	
	<body>
		<div id="app">
			<p v-text="msg"></p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'123'
				}
			})
		</script>
	</body>
</html>

v-cloak与v-text的区别：

（a）默认v-text是没有闪烁问题

（b）v-text会覆盖元素中原本的内容，但是插值表达式智慧替换自己的占位符，不会把整个元素内容清空

示例：

【运行结果】

（3）v-html

若字符串带有标签，想输出为html，则需要用v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
	</head>
	<body>
		<div id="app">
			<p v-html="msg"></p>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'<h1>123</h1>'
				}
			})
		</script>
	</body>
</html>

【运行结果】