談?wù)剉-if顯示隱藏問(wèn)題

開(kāi)發(fā)中經(jīng)常會(huì)遇到使用v-if來(lái)判斷頁(yè)面的顯示與隱藏問(wèn)題,例如列表頁(yè)根據(jù)后臺(tái)標(biāo)識(shí)來(lái)控制按鈕的展示與隱藏!
如圖;

具體v-if顯示與隱藏問(wèn)題:
vue中多條件時(shí)優(yōu)雅寫法
VUE中if條件語(yǔ)句||與&&的使用
computed中計(jì)算監(jiān)控
總結(jié)
一、vue中多條件時(shí)優(yōu)雅寫法
普通寫法::

優(yōu)雅寫法:

更高級(jí)寫法:
使用方法,復(fù)用性高,適用場(chǎng)景:多個(gè)標(biāo)簽都需要用到此判斷,這樣多個(gè)標(biāo)簽中的v-if只要用到matchState方法,都可以做判斷!!!
注意寫法:matchState(某元素,/[匹配值]/)

二、VUE中if條件語(yǔ)句||與&&的使用
1、||與&&同時(shí)使用:

2、只是用||在if條件語(yǔ)句中使用(||條件之間是或者的關(guān)系):

3、只是用&&在if條件語(yǔ)句中使用(&&兩個(gè)條件必須一致)

4、vue 判斷某個(gè)值是否為真,判斷條件為多個(gè)值

三、computed中計(jì)算監(jiān)控
大部分人都是這樣寫:

更美觀(最爹)的寫法:

二、總結(jié)
說(shuō)真的這東西很耗性能,能用邏輯搞定盡量不要寫在ui上面!廢話!!!!真多!!!
掃碼了解更多知識(shí)點(diǎn)
評(píng)論
圖片
表情
