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

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

[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST
[配置]VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL HOST process.env是什么? process.env 是 Node.js 中的一个环境对象.其 ...
vue中给v-for循环出来的元素分别加样式
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="box" v-for="(item, index) in datas&qu ...
在java中哈希表判断某个元素是否存在的原理
在java中哈希表判断某个元素是否存在的原理在本文中我们将介绍,在hash表中如何判断两个元素是否重复. 首先,我们们需要知么hash表是什么? Hash表由称为离散表,是由数组加链表实现的一种数据 ...
vue v-if 判断某个元素满足多个条件的写法
v-if判断active满足0的时候写法是:v-if="active === 0" 那如果active同时要满足0,1,2三个值的时候,如果在v-if里用 || 并列写如:v-i ...
Vue中使用v-for生成dom删除元素错乱的问题
项目上需要一个条件树的组件,多个条件这里使用一个数组去保存,然后使用v-for循环数组插入dom. vue组件里使用v-for时很容易忽略了每一项的key值,遇到的问题如果后续需要对数组进行删除操作的 ...
vue中使用el-tree组件,判断是节点还是叶子,添加图片
感谢我的同学来自小米的前端工程师-----冯昕这个需求的要求是这样的,有一个树形结构的数据,我们需要在叶子前方添加一张图片,如果是节点,那么就没有这个图片, 现在的样子是这样的现在我们需要将部门前 ...
vue中获取并操作dom元素
获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li element = documen ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
Vue中JSX的基本用法
基本用法首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的_Styles.js ...

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

一：最简便的写法就是

二：使用方法，复用性高

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

最新文章

热门文章