[JavaScript知识库]谈谈v-if显示隐藏问题

vue条件语句v-if中条件较多时优雅写法

普通写法:

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

优雅写法:

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

更高级写法：
使用方法，复用性高，适用场景：多个标签都需要用到此判断，这样多个标签中的v-if只要用到matchState方法，都可以做判断
注意写法：matchState（某元素，/[匹配值]/）

标签中： v-if="matchState(type,/[123]/)"

方法中：  methods: {
           		 // 判断状态
          	 	 matchState(state = '', reg) {
               	 return !!String(state).match(reg)//返回true/false
            	}
            }

VUE中if条件语句||与&&的使用

1、||与&&同时使用

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

2、只是用||在if条件语句中使用（||条件之间是或者的关系）

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

3、只是用&&在if条件语句中使用（&&两个条件必须一致)

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

4、vue 判断某个值是否为真，判断条件为多个值

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

*computed中计算监控：

通常写发：

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

更美观（最爹）的写法：

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