Vue 條件判斷(v if v show)

2022-02-16 15:05:05 字數 981 閱讀 4807

1、v-if

(1)v-if運用

"

">

只有在為true的時候才會顯示資料

(2)v-if與v-else

"

">

v-if為true的時候執行if,否則,執行else

(3)案例:v-if與v-else的應用

"

">

if="

isuser

">

for="

username

">使用者賬號

"text

" id="

username

" placeholder="

使用者賬號

">

else>

for="

email

">使用者郵箱

"text

" id="

email

" placeholder="

使用者郵箱

">

"isuser=!isuser

">切換型別

vue(

})

點選切換型別後可以切換顯示內容,這個時候會存在input標籤復用的問題(切換後輸入框中的內容沒有改變,這是虛擬dom,盡可能地復用已經存在的元素,而不是新建乙個元素,可以提公升效能),可以增加key屬性,當key一樣的時候就會保留內容,不一樣的時候就不會保留

2、v-show

"

">

vue(

})

v-if:當條件為false時, 包含v-if指令的元素, 不會存在dom中

v-show: 當條件為false時, v-show只是給我們的元素新增乙個行內樣式: display: none

當顯示與隱藏需要頻繁切換的時候使用v-show,切換次數較少的時候使用v-if

Vue條件判斷

v if後面的條件為false時,對應元素及子元素不會渲染,也就是說不會有對應的標籤出現在dom中。isshow h2 div js vue.js script newvue isshow abc div abc div abc div abc div h2 else isshow為false顯示我...

條件判斷 條件篩選?不如條件判斷!

怎樣加快招投標工作流程呢?在此給您支個招,讓excel幫你提高工作效率吧。以下是考評 商是否合格的列表,得分小於60或缺評,則判為 不合格 得分大於60,則判為 合格 為了方便大家學習,開拓思路,在此提供兩種解題方法。01 條件篩選法 開啟篩選功能 數字篩選 小於 在 自定義自動篩選方式 中,分別輸...

06 vue中的條件判斷

v if後面的條件為false時,對應的元素以及其子元素不會渲染,也就是不會有對應的標籤出現在dom中。案例一 bbbccc ddd data 案例二isshow為false時顯示我 data 案例三 80 良好 60 及格 不及格data 案例四 data computed else if thi...