Vue中使用v-if判断某个元素满足多个条件的简约写法-案例

Posted 2021-09-09 JackieDYH

v-if判断active满足0的时候写法是：v-if="active === 0"

那如果active同时要满足0，1，2三个值的时候，如果在v-if里用 || 并列写
如：v-if="active === 0 || active === 1 || active === 2"

写法很明了，但是很不简介

 一：最简便的写法就是

//[ ]里可以放字符串，数值等
v-if="[0,1,2].includes(active) "

普通写法
v-if=" type==1 || type==2 || type==3 "

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

二：使用方法，复用性高

适用场景：多个标签都需要用到此判断

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

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

 这样多个标签中的v-if只要用到matchState方法，都可以做判断

注意写法：matchState（某元素，/[匹配值]/）