回顾下之前的指令：
v-bind ：单向绑定解析表达式，可简写 :xxx
v-model：双向数据绑定；
v-for ：遍历数组/对象/字符串
v-on ：绑定事件监听，可简写 @
v-if ：条件渲染（动态控制节点是否存在）
v-else ：条件渲染（动态控制节点是否存在）
v-show ：条件渲染（动态控制节点是否展示）
v-text
1）作用：向其所在节点中渲染文本内容；
2）与插值语法的区别： v-text 会替换掉节点中的内容；
<div id="root">
<h2>你好，{{name}}</h2>
<h2 v-text="name"></h2>
<h2 v-text="name">你好，</h2>
</div>
提示：插值语法中，插入 name 的值，和 v-text 写在属性里的方式，显示的结果一样；
new Vue({
el: '#root',
data: {
name: '51cto',
}
})提示：v-text 会把 "name" 的值，完全替换标签里的 text ，这样一来，还是插值语法更灵活；
<h2 v-text="name">你好，</h2>
如果，写成这个样子，是没有效果的，“你好，” 也会被 "name" 中的值完全替换；
只有当标签里不写什么了，只显示 name 属性的值，那就可以使用 v-text ；
注意：v-text 不解析 name 中的标签，如： name="<span>51cto</span>"，只会照原样输出；
v-html
和 v-text 相比，v-html 支持结构的解析；
<div id="root">
<h2>你好，{{name}}</h2>
<h2 v-html="str"></h2>
</div>
提示：换成 v-html 会解析 str 中的标签；
new Vue({
el: '#root',
data: {
name: '51cto',
str:'<span style="color:red">你好</span>'
}
})提示：str 属性中，包含一个 span 和样式；
看下效果：
看下结构：
注意：这个指令可能存在一些安全性的问题，比如 cookies 暴露；