版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83416284
v-text
v-text可以将一个变量的值渲染到指定的元素中。
用法：
<span v-text="hello"></span>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果：
从上面我们可以看出，h1标签只能以字符串形式输出，也就是说v-text只能将数据以字符串的形式在HTML页面中进行输出。
v-html
{{}}和v-text会将数据解释为纯文本，而非HTML，为了输出真正的HTML，你需要使用v-html
用法：
<div v-html="hello"></div>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果：
从上面我们可以看出，被h1包裹的文字明显被加粗放大了，这说明被v-html能将数据以HTML的形式在页面中进行输出。
v-cloak
v-cloak指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和CSS规则如[v-cloak]{display: none;}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。通常用来防止{{}}表达式闪烁问题。
用法
<style>
[v-cloak]{
display: none;
}
</style>
<span v-cloak>{{hello}}</span><br>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果：
这个的展示效果看上去与v-text的效果一样，其实是有区别的，那就是当页面加载缓慢时，被v-cloak包裹的信息是不会输出的，除非页面加载完毕，这样的好处是，当页面内容较多或者页面本身由于网速差而加载缓慢时，页面中的信息不会出现由{{hello}}到<h1>Hello World !</h1>的抖动。
完整代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-text="hello"></span><br>
<span v-cloak>{{hello}}</span><br>
<div v-html="hello"></div>
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
</script>
</html>