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>
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐