談?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)雅寫(xiě)法
  

• VUE中if條件語(yǔ)句||與&&的使用

• computed中計(jì)算監(jiān)控

• 總結(jié)

一、vue中多條件時(shí)優(yōu)雅寫(xiě)法

普通寫(xiě)法:：

優(yōu)雅寫(xiě)法:

更高級(jí)寫(xiě)法：

使用方法，復(fù)用性高，適用場(chǎng)景：多個(gè)標(biāo)簽都需要用到此判斷，這樣多個(gè)標(biāo)簽中的v-if只要用到matchState方法，都可以做判斷！??！
注意寫(xiě)法：matchState（某元素，/[匹配值]/）

二、VUE中if條件語(yǔ)句||與&&的使用

1、||與&&同時(shí)使用：

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

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

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

三、computed中計(jì)算監(jiān)控

大部分人都是這樣寫(xiě)：

更美觀（最爹）的寫(xiě)法：

二、總結(jié)

說(shuō)真的這東西很耗性能，能用邏輯搞定盡量不要寫(xiě)在ui上面！廢話?。。?！真多！??！

掃碼了解更多知識(shí)點(diǎn)