v-cloak
<html>
<head>
<meta charset="utf-8"></meta>
<title>v-cloak</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:"123"
}
})
</script>
</body>
</html>
在网速正常的时候,上述代码会迅速出现123
这个值,但也能看到由{{msg}}
向123
转变的过程,在网速缓慢的时候更为明显。
解决插值表达式的上述问题就需要用到v-cloak
属性。
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
将上述代码添加到html文件即可解决闪烁问题。
v-text
v-text
可以获取Vue
对象中data
的内容。在上述例子的基础上,添加:
<h4 v-text="msg"></h4>
即可获取到msg
的值。
那么它与插值表达式{{}}有什么区别和联系呢?
-
v-text
无闪烁问题 -
具有
v-text
属性的dom
元素中的内容不会显示到页面上,如:<h4 v-text="msg">----</h4>
其中的
----
不会出现在页面上,会被覆盖,但插值表达式的前后可以添加其他的值,不会覆盖。 -
v-text
和插值表达式不能解析html语句
v-html
上文说到v-text
和插值表达式无法解析html语句,所以v-html
出现了。
<p v-html="msg2"></p>
var vm = new Vue({
el: "#app",
data:{
msg:"123",
msg2:"<h1>ss</h1>"
}
})
这段代码即可将msg2解析为html代码进行输出。