v-cloak

303 阅读1分钟

有时浏览器可能会直接显示出未编译的Mustache标签

如:如果运行时卡住,界面上将会出现{{message}},当代码再次运行时才会替换{{message}}

v-cloak 用法:

注意: v-cloak经常需要搭配css中 display: none; 使用

下面代码加入setTimeout模仿闪动效果

<style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{message}}
    </div>
    <script  src="../js/vue.js"></script>
    <script>
        // 在vue解析之前,div中有一个属性v-cloak
        // 在vue解析之后,div中没有一个属性v-cloak
        setTimeout(function () {
                const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello',
                }
            }) 
        }, 2000)