vue解决插值表达式闪烁的问题

利用vue指令v-cloak解决

避免页面闪烁

//HTML代码块：

<div v-cloak>
    {{xinxi}}
</div>

//css代码：
[v-cloak] {
    display:none !important;    

}
//或者
[v-cloak]{
    visibility: hidden !important; /*防止被覆盖*/
}

v-text与{{}}的区别

•  默认v-text是没有闪烁问题，{{}}存在闪烁的问题
• v-text会覆盖掉元素中原本的内容，{{}}只会替换自己的这个占位符

{{}}、v-text与v-html的区别

• 前两个向页面渲染普通文本，后者向页面输出html。
• v-html与v-text一样，v-html也会覆盖掉元素中原本的内容。
• 插值表达式只会替换自己的占位符，不会把整个元素清空