Vue常見指令 v cloak

2022-06-06 04:15:08 字數 1145 閱讀 8745

將資料編寫完成,通過插值表示式輸出到檢視,在重新整理的時候出現很短的源**,如圖:

指令v-cloak的作用就是用來解決瀏覽器在載入頁面時因存在事件差而產生的閃動問題,她的原理是先隱藏檔案掛載位置,處理渲染好後在顯示最終結果。這個指令需要與css規則一起使用才可以

如果是在真實專案中,可以將v-clock寫在根元素上面

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

/*使用屬性選擇器

*/[v-cloak]

style

>

head

>

<

body

>

<

div

id>

<

p v-cloak

> }

p>

<

hr>

<

p> }

p>

<

p> }

p>

<

p> }

p>

<

p> }

p>

div>

body

>

<

script

src=""

>

script

>

<

script

>

//!建立vue例項

newvue(,

})script

>

html

>

Vue基本指令v cloak的使用

v cloak不需要表示式,它會在vue例項結束編譯時從繫結的html元素上移除,經常和 配合使用 div newvue script 這時雖然已經加了指令v cloak,但其實並沒有起到任何作用,當網速較慢 vue.js檔案還沒有載入完時,在頁面上會顯示 的字樣,直到vue建立例項 編譯模板時,d...

基本指令v cloak

v cloak 它會在 vue 例項結束編譯時從繫結的 html 元素上移除,經常和 css 的 display none 配合使用。當網速較慢 vue.js 檔案還沒 載入完時,在頁面上會顯示 的字樣,直到 vue 建立例項 編譯模板時,dom 才會被 替換,所以這個過程螢幕是有閃動的 所以當沒有...

Vue常見指令

v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為 true,當前標籤才會輸出到頁面 v else 如果為 false,當前標籤才會輸出到頁面 v show 通過控制 display 樣式來控制顯示 隱藏 v for 遍歷陣列 物件 v ...