On the problem of V-IF display and hiding

vue Conditional statements v-if Elegant writing when there are many conditions in

Common writing :

v-if=" type==1 || type==2 || type==3 "

Elegant writing :

v-if=" [1,2,3].includes(type) "

More advanced writing ：
Usage method , High reusability , Applicable scenario ： Multiple tags need to be used to judge , In such multiple tags v-if Just use matchState Method , Can make judgments
Pay attention to writing ：matchState（ A particular element ,/[ Match the value ]/）

 In the label ： v-if="matchState(type,/[123]/)"

 In the method ：  methods: {
    
           		 //  Judge the state 
          	 	 matchState(state = '', reg) {
    
               	 return !!String(state).match(reg)// return true/false
            	}
            }

VUE in if Conditional statements || And && Use

1、|| And && Use at the same time

v-if="!item.type && (item.receiveStatus === 1 || item.receiveStatus === -1 )"

2、 Just use || stay if Use... In conditional statements （|| The relationship between conditions is or ）

v-if="item.coolStorage'–' || item.coolStorage' ' ? flag : !flag"

3、 Just use && stay if Use... In conditional statements （&& The two conditions must be consistent )

v-if="item.coolStorage'–' && item.coolStorage'' ? flag : !flag"

4、vue Determine whether a value is true , The judgment condition is multiple values

<button class="action cu-btn" v-if="isContentShow([-1, 3, 4, 7], item.status)" @click.stop="delOrder(item, index)"> Delete order </button>

*computed Calculation and monitoring in ：

Usually write hair ：

<div class="item_margin" 
	v-show="itemList.supplierName || itemList.StoreName || itemList.ContactName || itemList.Phone">
</div>

More beautiful （ Dad ） Writing ：

<div class="item_margin" v-show="showSupplier"></div>
computed: {
    
  showSupplier () {
    
    return this.itemList.supplierName || this.itemList.supplierStoreName || this.itemList.ContactName || this.itemList.ContactPhone
  }
}