Vue起步06 條件渲染

2021-09-21 01:35:35 字數 1253 閱讀 6870

問題一,我們的知道什麼是條件渲染?

更具某一條件來判定是否要渲染某一塊內容

問題二,條件是什莫?

v-if/v-show後面的truthy/falsthy

問題三,那兩者有什莫不同呢?

v-if

條件渲染:「真正」vue中的「就地復用」策略:因為對於一些可復用且無關鍵字key的元素,vue在條件渲染時,會選擇復用而不是真正的條件渲染,從新開始渲染某個元素,以此來提高效能】的條件渲染,因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

惰性渲染:只有當指令後面為truthy時,才會渲染條件塊,否則完全不會理會條件塊

v-show

條件渲染:不管後面布林值是否為truthy/falsthy,其都會渲染條件塊,只是設定css屬性display來達到隱藏切換的作用

問題四,v-if會復用哪些元素呢,怎末復用呢?

當發現條件塊中存在可復用元素【標籤一樣】,v-if指令切換時vue不會從新再次渲染乙個新的元素,而是選擇可復用元素,渲染部分不同特性和樣式

ps:若想要阻止的話,標籤內加乙個key特性,值需唯一

問題五,那種情況下適合用v-if,那種適合用v-show呢?

當條件塊容量巨大【使用標籤包裹】,且之後指令後條件很少改變,則建議使用v-if指令【緣由:惰性渲染,初次渲染開銷小】;當條件塊之後指令後條件頻繁改變,則建議使用v-show指令【兩者情況都存在記憶體中,沒有真正意義上的條件渲染,所以,若是頻繁切換則可以只是修改dispaly屬性,依此來提高整個效率】

demo

沒有游標的變化,說明徹底的移除,包括記憶體裡面的,

每次渲染都是從新開始

-->

burningsnow

燃情雪

fullcitysnow

滿城雪toggle

username

userphone

toggle

菜鳥爬行中…

Vue學習之路6 條件渲染

所謂條件指令是指滿足某個條件時執行哪部分 不滿足條件時執行哪部分條件 vue條件指令有v if,v else if,v else三個,v if條件渲染用來指示元素是否移除或者插入,根據表示式的值的真假條件渲染元素。方式一使用v if顯示標籤,當初始化值為true時,則顯示第乙個標籤,當初始化值為fa...

vue系列課程3 條件渲染

單一檢視 v if show 我是if為true看到的p v else 我是if為false看到的p div template export default script 多檢視 v if show 我是if為true看到的span 哈哈哈a 是span p v else 我是if為false看到的...

06條件判斷

一 if語句 形式if expression statementif expression statement1 else statementif expression1 statement1 else if statement2 else statement3例子if legs 4 printf ...