v-cloak、v-text和v-html的基本区别
v-text和插值表达式的区别
在使用v-text="msg"时,v-text中的内容msg会直接取代标签中的原有内容。
而使用插值表达式{{msg}},可以不会取代标签中的原有内容。
因此,通常使用插值表达式{{msg}}插入内容更加合理。
v-cloak:用来消除插值表达式的闪烁问题
使用插值表达式固然更加方便,但是在页面渲染速度较慢时,就会出现{{msg}}而不是插值表达式所代表的内容,等待网页渲染完毕时才会正常。因此,v-cloak的作用就是在网页渲染阶段隐藏{{msg}},完全渲染完成后才显示内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</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 app = new Vue({
el: "#app",
data: {
msg: "123"
},
methods: {
}
});
</script>
</body>
</html>
v-html和v-text、插值表达式的区别
尽管v-text和插值表达式能够往标签中插入文本内容,但是无法插入html标签元素,他们会被当成文本进行处理,v-html的作用则是能够将html元素和文本内容插入到标签中。