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

前言

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)"> // 判断状态 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)">