條件渲染指令除了v-if,還有v-show,v-show指令用於根據元素的狀態控制元素的顯示和隱藏
<-、v-if是真正的條件渲染,v-if中對應的元素的狀態為true的時候,元素才被渲染出來,否則不被渲染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-show只是簡單的改變元素的display屬性,v-show中對應的元素的狀態為false時,元素的display屬性變為none,所以不被顯示*、v-if指令性能消耗問題:每次元素改變狀態,都要被重新渲染,所以元素的切換效能消耗比較大
*、v-show指令性能消耗問題:v-show控制的元素最初都會被渲染出來,每次改變狀態,只是改變元素的display屬性的值,所以元素的初始效能消耗比較大^、v-if使用場景:很少被切換狀態的元素,或者可能永遠都不被顯示的元素
^、v-show使用場景:被經常切換狀態的元素
1doctype 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...