vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match

---

前言

v-if判断active满足0的时候写法是v-if = 'active === 0'
那如果active同时要满足0，1，2三个值的时候，如果在v-if里用||并列写
v-if = 'active === 0 || active === 1 || active === 2'，这样是可行的，但代码有点冗余

---

简单写法

<div v-if="[0, 1, 2].includes(active)">div>

---

高复用性

<div v-if="matchState(active, /[012]/)">div>

methods: {
	// 判断状态
	matchState(str = '', reg) {
		// 返回true/false
		return !!String(str).match(reg);
	}
}

使用方法的时候，复用性高，适用场景多
这样多个标签中的v-if只要用到matchState方法，都可以做判断

---

match

MDN

match方法检索返回一个字符串匹配正则表达式的结果。

---

w3school

match方法将字符串与正则表达式进行匹配。
如果搜索值为字符串，则转换为正则表达式。
match方法返回包含匹配项的数组。
如果未找到匹配项，则match方法返回null。

---

String

MDN

String对象用于表示和操作字符序列。
字符串对于保存以文本形式表示的数据很有用。一些最常用的字符串操作是检查他们的长度，使用+和+=字符串操作符构建和连接它们，使用indexOf方法检查子字符串的存在或者位置，或使用substring方法提取子字符串。

---

w3school

JavaScript字符串存储一系列字符。
字符串可以是双引号或单引号内的任何文本。

---

includes

MDN

includes方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

---

w3school

includes方法确定数组是否包含指定的元素。
如果数组包含元素，则此方法返回true，否则返回false。
includes方法区分大小写。

---

示例

console.log([7, 3, 6].includes(3));
// true
console.log([7, 3, 6].includes(1));
// false

if([7, 3, 6].includes(1)) return 'hello world!';

---

<div v-if="[7, 3, 6].includes(3)">div>

类型很重要，如果数组里的值与includes中的值类型不同，不起作用，因为includes使用的是全等比较。

---

indexOf

w3school

indexOf方法返回值在字符串中第一次出现的位置。
如果未找到该值，则indexOf方法返回-1。
indexOf方法区分大小写。

---

MDN

indexOf方法返回数组中第一次出现给定元素的下标，如果不存在则返回-1。

---

示例

console.log([3, 6, 7].indexOf(7));
// 返回下标 2
console.log([3, 6, 7].indexOf(1));
// 未找到，返回 -1

用法与includes类似。

---

区别

indexOf与includes类似，includes返回Boolean，indexOf返回下标，做判断时推荐使用includes。