VUE課程參考 16 條件渲染v show

2022-03-06 04:42:35 字數 1557 閱讀 9358

條件渲染指令除了v-if,還有v-show,v-show指令用於根據元素的狀態控制元素的顯示和隱藏

<

div

id>

<

p v-if

="ok"

>}

p>

<

p v-show

="ok"

>}

p>

div>

<

script

src="../js/vue.js"

>

script

>

<

script

>

let vm

=new

vue(

});script

>

-、v-if是真正的條件渲染,v-if中對應的元素的狀態為true的時候,元素才被渲染出來,否則不被渲染

-、v-show只是簡單的改變元素的display屬性,v-show中對應的元素的狀態為false時,元素的display屬性變為none,所以不被顯示*、v-if指令性能消耗問題:每次元素改變狀態,都要被重新渲染,所以元素的切換效能消耗比較大

*、v-show指令性能消耗問題:v-show控制的元素最初都會被渲染出來,每次改變狀態,只是改變元素的display屬性的值,所以元素的初始效能消耗比較大^、v-if使用場景:很少被切換狀態的元素,或者可能永遠都不被顯示的元素

^、v-show使用場景:被經常切換狀態的元素

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>16、條件渲染v-show

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看到的...

Vue起步06 條件渲染

問題一,我們的知道什麼是條件渲染?更具某一條件來判定是否要渲染某一塊內容 問題二,條件是什莫?v if v show後面的truthy falsthy 問題三,那兩者有什莫不同呢?v if 條件渲染 真正 vue中的 就地復用 策略 因為對於一些可復用且無關鍵字key的元素,vue在條件渲染時,會選...

Vue學習之路6 條件渲染

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