<style> [v-cloak] { /*为了解决列表渲染变量闪烁的问题，需要配合el挂载的标签使用，在el挂载的标签上加上v-cloak*/ display: none; }
</style>
<div id="boxVue" v-cloak></div>
今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令，这时有一个问题困扰了我很久，我明明按照大家所说的加了v-for为什么还是没有用。后来折腾了很久才发现原因，先不说为什么，看看代码来：
在html中：
|
1
2
3
|
<
ul
v-for
=
"item in person"
>
<
li
v-cloak>{{item.name}}</
li
>
</
ul
>
|
在CSS中:
|
1
|
[v-cloak]:{diapsly:
none
;}
|
在script中：
|
1
2
3
4
5
6
7
8
9
10
|
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:
|
1
|
[v-cloak]:{
display
:
none
}
|
html:
|
1
|
<
div
v-cloak>{{message}}</
div
>
|
看到别人的写法以后我就以为是直接在要渲染的该标签添加指令，这也导致了我的v-cloak一直没有起到作用。最后，我把v-cloak添加到了v-for上，一切终于变得正常了。
|
1
2
3
|
<
ul
v-for
=
"item in person"
v-cloak>
<
li
>{{item.name}}</
li
>
</
ul
>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。