国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js-內置指令

zzbo / 558人閱讀

摘要:如果一次判斷的是多個元素,可以在內置的元素上使用條件指令,最終渲染的結果不會包含該元素。列表渲染也支持用代替作為分隔符,它更接近迭代器的語法的表達式支持一個可選參數作為當前項的索引。分隔符前的語句使用括號,第二項就是當前項的索引。

學習筆記:內置指令
內置指令 基本指令 v-cloak

v-cloak不需要表達式,它會在Vue實例結束編譯時從綁定的HTML元素上移除,經常和CSS的display: none;配合使用:

{{message}}

當網速較慢、Vue.js文件還沒加載完時,在頁面上會顯示{{message}}的字樣,直到Vue創建實例、編譯模板時,DOM才會被替換,所以這個過程屏幕有閃。只要加一句CSS就可以解決這個問題:

[v-cloak] {
    display: none;
}

v-cloak是一個解決初始化慢導致頁面閃動的最佳實踐,對于簡單的項目很實用。

在工程化的項目中,項目的HTML結構只有一個空的div元素,剩下的內容都由路由掛載不同組件完成,這時不再需要v-cloak

v-once

v-once是一個不需要表達式的指令,作用是定義它的元素或者組件只渲染一次,包括元素或組件的所有子節點。首次渲染后,不再隨數據的變化重新渲染,將被視為靜態內容。

v-once在業務中很少使用,如果需要進一步優化性能時,可能會用到。

條件渲染指令 v-ifv-else-ifv-else

Vue.js的條件指令可以根據表達式的值在DOM中渲染或銷毀元素/組件。

v-else-if要緊跟v-ifv-else要緊跟v-else-ifv-if,表達式的值為真時,當前元素/組件及所有子節點將被渲染,為假時被移除。

如果一次判斷的是多個元素,可以在Vue.js內置的