vue數據渲染出現閃爍問題及v-cloak沒生效

今天在使用vue進行數據渲染的時候發現當我不停的按F5刷新的時候出現了{{message}}的狀況。通過多方查找我知道了要解決這個問題須要添加v-cloak指令，這時有一個問題困擾了我好久，我明明按照你們所說的加了v-cloak爲何仍是沒有用。後來折騰了好久才發現緣由，先不說爲何，看看代碼來： 在html中：

<ul v-for="item in person">
	<li v-cloak>{{item.name}}</li>
</ul>

在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:
<div v-cloak>{{message}}</div>

看到別人的寫法之後我就覺得是直接在要渲染的該標籤添加指令，這也致使了個人v-cloak一直沒有起到做用。最後，我把v-cloak添加到了v-for上，一切終於變得正常了。

<ul v-for="item in person" v-cloak>
	<li >{{item.name}}</li>
</ul>

注意： 昨天又遇到一個坑，當我使用了v-cloak時發現他並無生效，頁面仍然出現了閃爍。經過屢次調試檢查才發現原來是個人[v-cloak]的dispaly屬性被優先級別搞的樣式覆蓋致使，最後我給他加了 !important。 後來發現有兩種狀況會致使v-cloak沒有生效。 一、v-cloak的display屬性被層級更高的給覆蓋了，解決方案如我以前同樣。

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

二、樣式放在了@import引入的css文件中,解決方案：

1. 放入由link引入的css文件裏；
2. 寫在內聯樣式中。