成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js-內(nèi)置指令

zzbo / 574人閱讀

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

學(xué)習(xí)筆記:內(nèi)置指令
內(nèi)置指令 基本指令 v-cloak

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

{{message}}

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

[v-cloak] {
    display: none;
}

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

在工程化的項目中,項目的HTML結(jié)構(gòu)只有一個空的div元素,剩下的內(nèi)容都由路由掛載不同組件完成,這時不再需要v-cloak。

v-once

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

v-once在業(yè)務(wù)中很少使用,如果需要進(jìn)一步優(yōu)化性能時,可能會用到。

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

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

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

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