vue指令--v-text和v-html

v-text指令

v-text与插值表达式{{}}的作用是一样的，都是操控标签的内容区域信息。

语法：

<标签 v-text="表达式"> </标签>

注意：

1. v-text 是通过标签的属性形式呈现。
2. 如果标签内容区域有默认信息，则会被v-text覆盖掉。
3. v-text 可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算符号等运算。

示例代码：

<div id="app">
    <p>{{ city }}87</p>
    <p v-text="city">87</p>
    <p v-text="people">{{city}}</p>  <!--变量-->
    <p v-text="300"></p>         <!--常量-->
    <p v-text="people+400"></p>  <!--算术运算-->
    <p v-text="people>1000"></p>  <!--比较运算-->
    <p v-text="people>1000 && city==='北京'"></p>  <!--逻辑运算-->
    <p v-text="people>1000 ? '超级城市' : '大城市'"></p>  <!--三元运算-->
</div>

<script src="./vue.js"></script>

<script>
    var vm = new Vue({
        // delimiters:['$','#'],
        el:'#app',
        data:{
            city: '北京',
            people: 2000
        }
    })
</script>

v-html指令

v-html 与 v-text、{{ }} 插值表达式的作用一样，都是操控标签的内容区域。

语法：

<标签 v-html="表达式"> </标签>

v-html、v-text、{{ }}的异同：

1. v-html对 html标签 和 普通文本 内容都可以设置显示。
2. v-text、{{ }} 只针对 字符串 起作用，如果数据中有html标签，那么标签的箭头符号要做字符实体转换，进而使得浏览器上直接"显示箭头"等标签内容，等同于不解析html标签内容：

 <  变为  &lt;       // less than
 >  变为  &gt;       // great than

字符实体详细说明
3. v-html和v-text没有闪烁问题。
4. 它们都可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用。

应用场景：

如果服务器返回的数据中，包含有HTML标签(例如富文本编辑器内容)，可以使用 v-html 来渲染,(v-text和 {{}}都不行)

默认内容：

<p>{{score}}默认内容</p>
<p v-text="score">默认内容</p>
<p v-html="score">默认内容</p>

注意：

1. v-text 和v-html 标签有默认内容，但是都会被覆盖掉，而插值表达式不会覆盖。
2. v-html尽量避免使用(除非完全掌控)，否则会带来危险(XSS攻击 跨站脚本攻击)。
3. 标签的默认内容会被v-html覆盖。

使用示例：

<div id="app">
    <p>{{ city }}</p>
    <p v-text="city"></p>
    <p v-html="city"></p>
    <p v-html="people"></p>   <!--变量-->
    <p v-html="300"></p>      <!--常量-->
    <p v-html="people+400"></p>    <!--算术运算-->
    <p v-html="people>1000"></p>   <!--比较运算-->
    <p v-html="people>1000 && city==='北京'"></p>  <!--逻辑运算-->
    <p v-html="people>1000 ? '超级城市' : '大城市'"></p>  <!--三元运算-->
</div>
<script src="./vue.js"></script>

<script>
    var vm = new Vue({
        // delimiters:['$','#'],
        el:'#app',
        data:{
            city: '<a href="#">北京</a>是一个超级城市',
            people: 2000
        }
    })
</script>