vue 刷新或者加载闪烁

1、vue中绑定数据的时候,渲染页面时会出现变量闪烁

<div id="app">
    <h2>{{message}}</h2>
</div>
//在页面加载的时候会看到 {{message}}  几秒过后才会渲染数据。

2、解决方案

// 方法一
<h2 v-html="{{message}}"></h2> 
  //这样就不出现闪烁的问题;


// 方法二
<h2 v-cloak>{{message}}</h2>
 // 在css里面需要添加如下代码
[v-cloak]{
    display:none;
} 
//如果出现权重的层级,不起作用建议代码如下

[v-cloak]{
    display:none !important;
}

其实还有方法三,就是用v-text进行绑定变量,而不是用{{}}这种插值的方式,v-text的缺点就是没有办法进行字符串拼接,需要提前拼接好

猜你喜欢

转载自my.oschina.net/u/3477605/blog/1794548