有时浏览器可能会直接显示出未编译的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)