Vue2(笔记16) - Vue核心 - 内置指令

回顾下之前的指令：

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 暴露；