Vue之條件渲染

1.v-if

條件性的渲染一塊內容 指令中的表示式返回為true的時候渲染 反之為false 不渲染

v-if

="first"
>
onep
>
v-if
="second"
>
twop
>
v-if
="third"
>
nullp
>

new

vue(
})

v-else指令來表示v-if的else塊 如果v-if塊表示式為false 不被渲染 則渲染對應的v-else 塊

v-if

="first"
>
v-if塊1p
>
v-else
>
v-else塊1p
>
v-if
="second"
>
v-if塊2p
>
v-else
>
v-else塊2p
>

new

vue(
})

也是根據條件展示元素 條件為true 展示 反之 不展示

不同的是 v-show的不顯示 只是類似於不顯示 display：hidden ，元素仍然儲存在dom中

"first"

>
v-show
="one"
>
hello worldp
>
v-show
="two"
>
hello worldp
>
div>
>
newvue(}
)script
>

v-show 是虛假的條件渲染 不管是true或者false ,元素都會被渲染，顯示隱藏只是css進行切換

v-if

v-show

切換開銷高低

渲染開銷

低(開始只渲染為true的塊)

高(所有塊都渲染 只不過是false塊不顯示)

適用條件

條件很少改變 不經常切換

非常頻繁的切換

vue條件渲染

判斷1 count 大於0，count的值是 5 判斷2 count的值是 判斷3 count的值是 data 當count值為0時，符合判斷3，呼叫判斷3的語句輸出 5 判斷2 count的值是 判斷3 count的值是 從結果看出，只呼叫了判斷1，說明它的執行 情況是按照 塊順序來去進行的，當前...

Vue 條件渲染

v if v else if v else v show 條件展示 簡單明瞭，直接上案例 案例 條件渲染 單路分支 h3 a p 條件渲染 雙路分支 h3 a p v else b p 條件渲染 多路分支 h3 美食 p 遊戲 p v else 睡覺 p 條件展示 h3 條件展示 p div bod...

Vue條件渲染

使用場景 判斷是否載入，如果為真，就載入，否則不載入 flag 如果flag為true則顯示,false不顯示 span div var vm newvue script type a a div v else if緊跟在v if或v else if之後 表示v if條件不成立時執行 else if...