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

最新推荐文章于 2024-05-20 17:02:17 发布
最新推荐文章于 2024-05-20 17:02:17 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： 开发过程中遇到的问题 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BoZai_ya/article/details/125525829
版权

今天在写项目时 当写v-if判断条件时，满足任一值就符合条件。感觉自己的写法特别冗余。就进行了调整，整理如下

原始写法

   v-if="
        formState.intentCondition.intentName === 'UNKNOWN' ||
        formState.intentCondition.intentName === 'CONFIRM' ||
        formState.intentCondition.intentName === 'DENY' ||
        formState.intentCondition.intentName === 'RESET'
    "

这种写法不是不行，但是看着都太罗嗦了

改进之后

v-if="['UNKNOWN', 'CONFIRM', 'DENY', 'RESET'].includes( formState.intentCondition.intentName) "

改进之后看着都简单很多

BoZai_ya
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE中V-IF条件判断改变元素的样式操作
12-28
方法一 v-if判断后用标签改变样式（特定显示列字体加粗） {{col.text}} {{item[col['value']]}} </v-list-i
对vue中v-if的常见使用方法详解
10-17
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
12-18 1万+
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
条件判断v-if
qq_57611356的博客
06-14 526
条件判断 v-if 根据表达值的真假，切换元素的显示和隐藏 原理：操纵DOM元素，true存在于DOM树中，false不存在 <h2 v-if='isShow'>12344</h2> el:'#app', data:{isShow:true} //true显示12344 false不显示 v-else 为true时显示内容，为false显示其他内容，在其他内容处加v-else <h2 v-if='isShow'>12344</h2> ..
VUE之v-if语句多个条件判断时的写法
seimeii的博客
02-23 1万+
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
vue v-if 判断某个元素满足多个条件的写法
热门推荐
qq_42970173的博客
10-10 5万+
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) " 第二种，使用方法，复用性高，适用场景：多个标签都需要用到此判断 标签中：
hualinux 进阶 vue 1.8：vue命令（四）条件判断v-if命令
hualinux（阿华的linux）
04-06 210
目录 一、v-if用法 二、例子 这些讲vue的条件判断命令v-if，还有v-else 、v-else-if可以自己看一下 一、v-if用法 v-if条件可以看Vue中的v-if 预期：any 用法： 根据表达式的值的truthiness来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template>，将提出它的内容作为条件块。 当条件变化时该指令触发过渡效果。 当和v-if一起使用时，v-for的优先级比v-if更高...
v-if的使用记录
a99101的博客
02-13 394
自己是v-if使用记录
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用v-if v-show页面闪烁,div闪现的解决方法
12-12
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <...
vue中v-if条件渲染
a601413666的博客
05-19 843
1.判断后台返回的值是检测中止 或出具报告的时候 让更改状态按钮消失 已发样等待收样 支付完成等待发样 出现取消项目 html部分 <el-row v-for="(yong,index) in yonghu" :key="index"> <el-col> <div class="person_box"> <div class="person_one"> &
学习使用vue.js（三）条件与循环 v-if、 v-for
heshuaicsdn的博客
01-29 4131
<——— 在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。 如果你不愿意多花时间去自学vue.js 官网的API，那么你可以在跟着下面的例子学习最实用、最容易上手的案例。如果你还不会使用最基本的vue.js的话，推荐你先去看一下“1、2.学习使用vue.js（适合初学者）”然后再来学习以下内容：正题： 条件与循
vue-表格查询
Sunshinedada的博客
08-10 2678
vue-表格查询 html： <el-row class="order-input" :gutter="20"> <el-col :span="2.2"> <div class="grid-content bg-purple-dark">卡券名称</div> <el-input v-model="dataForm.name" placeholder="输入昵称查询"></el-i
Vue详情页面el-row el-col做出word样式效果和打印（element-ui）
ss_Tina的博客
06-08 1995
element ui word表格样式详情页面 vue页面打印
Element UI组件中el-col、el-row布局学习笔记
qq_56715703的博客
07-11 2万+
el-col：列。是Element UI布局中的核心组件，他的作用的将一行分成24个网格，为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。el-row：行。包裹在el-col外层，其中可以有无数个el-col。在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。二、el-row的属性：:gutter 调整布局之间的宽度---分栏间隔。（也就是两列之间的间隔距离）如果两个div间需要间隔以示区分。
Vue学习（事件监听、条件判断）
coder_Alger 的博客
04-04 990
一、事件监听 1、v-on：（语法糖@）的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的基本使用</title> </head> <body> <div i...
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 370
vite.config.ts配置。
v-if判断两个条件
07-28
回答: 如果你想同时满足两个条件，可以使用逻辑运算符"&&"来连接两个条件。例如，如果你想要满足条件condition1等于0并且condition2等于1，你可以这样写：v-if="condition1 === 0 && condition2 === 1"。这样只有当两个条件都满足时，才会执行v-if中的内容。\[1\] #### 引用[.reference_title] - *1* [VUE之v-if语句多个条件判断时的写法](https://blog.csdn.net/qq_36256590/article/details/122979688)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue v-if 判断某个元素满足多个条件的写法](https://blog.csdn.net/qq_42970173/article/details/108992055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [v-if条件判断](https://blog.csdn.net/KEY_cheung/article/details/108364581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BoZai_ya

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值