如何解决vue数据渲染出现闪烁的问题
这篇文章主要介绍了如何解决vue数据渲染出现闪烁的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联IDC提供业务:成都服务器托管,成都服务器租用,成都服务器托管,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。
在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令，这时有一个问题困扰了我很久，我明明按照大家所说的加了v-for为什么还是没有用。后来折腾了很久才发现原因，先不说为什么，看看代码来：
在html中：
{{item.name}}
在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:
{{message}}
看到别人的写法以后我就以为是直接在要渲染的该标签添加指令，这也导致了我的v-cloak一直没有起到作用。最后，我把v-cloak添加到了v-for上，一切终于变得正常了。
{{item.name}}
感谢你能够认真阅读完这篇文章，希望小编分享的“如何解决vue数据渲染出现闪烁的问题”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
分享名称：如何解决vue数据渲染出现闪烁的问题
浏览路径：
http://kswjz.com/article/gcejhd.html
