vue数据绑定指令

①、v-text 填充纯文本

- 相比插值表达式更加简洁

- 不存在插值表达式的闪动问题

②、v-html 填充HTML片段

- 存在安全问题

- 本网站内部数据可以使用，来自第三方的数据不可使用

③、v-pre 填充原始信息

- 跳过表达式的编译过程，显示原始信息

在插值表达式中插入的是什么就直接显示什么；在自定义属性v-text中也是插入什么就显示什么，与插值表达式具有相同的效果；在自定义属性v-html中会编译插入的数据；在自定义属性v-pre中显示的是原始数据，也就是插入的是什么就显示什么；在自定义属性v-html总共对变量添加引号也是显示原始数据。

插值表达式、自定义属性与显示原始数据的不同是：前两个事项插入的当成一个变量，输出的是变量里面的东西，而显示原始数据不讲输入的东西当成一个变量，直接进行输出。在指令中同样支持运算。

<!-- 对元素添加自定义属性 -->
    <div class="app" v-cloak>
        <!-- 插值表达式 -->
       <p> {{message}} </p>
       <!-- 使用 v-text自定义属性 -->
       <p v-text='message'></p>
       <!-- 使用v-HTML自定义属性 -->
       <p v-html="message">  </p>
       <!-- 显示原始数据 -->
       <p v-pre> {{message}} </p>
       <!-- 不让数据进行运行，显示原始数据 -->
       <p v-html=' "message" '></p>
    </div>
</body>
<script src="./js/vue.js"></script>

<script>
    new Vue({
        el: '.app',
        data: {
            message: '<span style="color:red">测试一下</span>',
        },
    })
</script>

vue数据绑定指令

推荐阅读