VUE之v-if语句多个条件判断时的写法

都挺好，刚刚好

已于 2022-02-23 15:18:46 修改

阅读量1.2w

点赞数

分类专栏： vue2 文章标签： Vue.js v-if 条件判断数组方法代码优化

于 2022-02-23 12:18:35 首次发布

原文链接：https://blog.csdn.net/qq_36256590/article/details/122979688?ops_request_misc=&request_id=&biz_id=102&utm_term=v-if%E9%87%8C%E9%9D%A2%E5%86%99%E4%B8%A4%E4%B8%AA%E6%9D%A1%E4%BB%B6&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~defaul

版权

vue2 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了在Vue.js中使用v-if进行条件判断时的多种方法，包括普通写法、简洁写法和复杂写法。简洁写法利用数组的includes方法减少冗余代码，而复杂写法则通过定义匹配状态的方法实现复用，提高代码可读性。这些技巧有助于提升Vue应用的性能和代码质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if满足某个条件condition = 0时，我们常见写法为：

v-if="condition === 0"

假如我想同时满足多个条件时，要怎么写呢？

[ 普通写法]

v-if="condition === 0 || condition === 1 || condition === 2"

[ 简洁写法]

v-if="[0, 1, 2].includes(condition)"
<!--括号里可以是字符串和数字-->

//[ ]里可以放字符串，数值等

[ 复杂写法]
适用场景：多个标签中都需要用到此判断

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

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

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

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

转载于：VUE之v-if语句多个条件判断时的写法