問題一,我們的知道什麼是條件渲染?
更具某一條件來判定是否要渲染某一塊內容
問題二,條件是什莫?
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 ...