1. 程式人生 > >Vue之v-cloak,v-text,v-html

Vue之v-cloak,v-text,v-html

 

v-cloak:

 

在低速網路環境中,vue.js的檔案請求速度會很慢,從而導致{{}}插值表示式會在頁面中渲染成雙花括號。

 

這個時候我們就需要使用v-cloak 給需要插值表示式所在地元素新增這個屬性,然後再樣式中使用屬性選擇器[v-cloak]{display:block},這樣就可以解決渲染錯誤的問題了。 

 

原理:

當vue.js下載完成之後,那麼vue會自動去除v-cloak這個屬性,從而顯示出這個標籤。

 

 

 

v-text:

v-text和插值表示式的區別 :

v-text是沒有閃爍的問題。

插值表示式更加靈活,+++++{{msg}}++++前後可以加上更多的內容,而v-text是不具備這種特性的

 

 

v-html;

v-html可以把字串中的html標籤渲染成真正的標籤, 差值表示式和v-text是直接把字串標籤輸出的