详解vue数据渲染出现闪烁问题

详解vue数据渲染出现闪烁问题

今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令，这时有一个问题困扰了我http://很久，我明明按照大家所说的加了v-for为什么还是没有用。后来折腾了很久才发现原因，先不说为什么，看看代码来：

在html中：

在css中:

[v-cloak]:{diapsly:none;}

在script中：

var vm = new Vue({

el:'#myapp',

date:{

person:[

{name:'zhangsan'},

{name:'lisi'},

{name:'wangwu'}

]

}

})

最开始是没有css样式，当我发现我不断的刷新的时候页面上会出现{{item.name}}一闪而逝,这时我在li上面添加了v-cloak指令，并添加了css样式。此时，我发现还是会有闪烁，我发现他根本没有执行css的样式。

现在大家应该都猜到原因了吧，因为我是在for循环里面添加的v-cloak。之前查的资料是直接使用。

css:

[v-cloak]:{display:none}

html:

&luScwPFat;div v-cloak>{{message}}

看到别人的写法以后我就以为是直接在要渲染的该标签添加指令，这也导致了我的v-cloak一直没有起到作用。最后，我把v-cloak添加到了v-for上，一切终于变得正常了。

以上就是本文的全部内容，希望对大家的学习有

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。