页面初始化时,html会出现短暂的 {{}},再加载页面。
原因:html页面加载时先构建dom,再加载vue。在vue初始化完成前,dom将{{}}代码解析为文本,在vue初始化后 才会把{{}}解析成vue的语法。此时列表渲染会有短暂的一闪的情况。
解决方法1:使用template标签将需要渲染的 html 包起来。
<div id="app">
<template>
{{msg}}
</template>
</div>
解决方法2:v-cloak指令
v-cloak 指令一直在元素上直到实例编译结束。
我们可以利用这点,在实例编译后元素再在页面出现。
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>