背景:
因为JS代码从上往下执行,当Vue实例没有挂载到标签上的时候,页面有可能显示未编译的Mustache标签。
使用v-cloak指令,原理是先隐藏,替换好值之后再显示最终的值(在Vue解析之前,div中有v-cloak;在Vue解析后,div中没有v-cloak)。
eg:
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
</body>