1.v-clock

使用v-clock能够解决插值表达式闪烁的问题

css代码

<style>
    [v-clock] {
        display: none;
    }
</style>

页面代码

<div id="app">
    <!-- 使用v-clock能够解决插值表达式闪烁的问题-->
    <p v-clock>{{message}}</p>
</div>

2.v-text

实现与插值表达式区别不大,v-text默认是没有闪烁问题的；插值表达式的前后可以放任意内容，v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素内容清空。

页面代码

<div id="app">
    <h4 v-text="message"></h4>
</div>

3.v-html

v-html会覆盖元素中原本的内容，但是会把message中的值当做html代码输出。

页面代码

<div id="app">
    <p v-html="message2"></p>
</div>

js代码

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message2: '<h1>big</h1>'
        }
    });
</script>