条件v-if

Posted 2023-05-17

参考技术A

1、if语句，可以用三元运算符代替

2、v-if="true/false"

与v-show区别
v-show对应的值也是布尔值，一样动态显示或者隐藏DOM元素
区别：v-show="false"只是相当于display：none，元素存在，只是被隐藏了；
而v-if="false" 相当于remove，元素不存在被抹除了；

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

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（某元素，/[匹配值]/）