Vue中的 v-if 和 v-else-if 多层判断的用法

最新推荐文章于 2024-06-12 15:53:59 发布
最新推荐文章于 2024-06-12 15:53:59 发布
阅读量8.3k 收藏 3
点赞数 1
分类专栏： vueJS类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdminGuan/article/details/103570750
版权

第一种用法：v-if —— v-else-if —— v-else

<el-table-column prop="versionStatus" label="状态">
    <template slot-scope="scope">					
        <p v-if="scope.row.versionStatus=='1'">在用</p>
        <p v-else-if="scope.row.versionStatus=='2'">过期</p>
        <p v-else-if="scope.row.versionStatus=='3'">作废</p>
        <p v-else-if="scope.row.versionStatus=='4'">停用</p>
        <p v-else>未知</p>					
    </template>
</el-table-column>

第二种用法：v-if —— v-else

<el-table-column prop="versionStatus" label="状态">
    <template slot-scope="scope">					
        <p v-if="scope.row.versionStatus=='1'">在用</p>
        <p v-if="scope.row.versionStatus=='2'">过期</p>
        <p v-if="scope.row.versionStatus=='3'">作废</p>
        <p v-if="scope.row.versionStatus=='4'">停用</p>
        <p v-else>未知</p>					
    </template>
</el-table-column>
UserGuan
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
对vue中v-if的常见使用方法详解
10-17
在上述示例中，如果`type`不是'A'，Vue会继续检查`v-else-if`的条件，直到找到匹配的条件或遇到`v-else`。这允许我们在同一块代码中处理多个不同的条件。 3. **与模板配合使用** 在HTML中，`<template>`标签可以...
Vue中的v-if和v-else
weixin_50357864的博客
03-27 4万+
一、v-if和v-else v-if判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，v-else才执行。 源码01： <!DOCTYPE > <html> <head> <meta charset="utf-8" /> <title>20210327练习</title> </head> <body> <div
[uni-app基础]使用v-if和@click事件绑定，控制页面元素view组件的显示与隐藏
最新发布
weixin_45828020的博客
06-12 897
通过data-vid自定义需要控制显示和隐藏的view组件id，此处为“0”，下一个则为“1"，以此类推,（为方便演示此处用比较机械的方法。如果需要控制显示和隐藏的组件很多，则需要优化此处代码）
【Vue】Vue中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）
热门推荐
一只洒鹿
06-25 5万+
v-if v-else v-else-if v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> &lt
VUE之v-if语句多个条件判断时的写法
初心不改
02-17 3万+
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(activ
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
12-18 1万+
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
Vue源码阅读（18）：v-if、v-else、v-else-if 指令的源码解析
f18855666661的博客
08-21 6708
前面的 17 篇文章对 Vue 底层的核心运行机制进行了解析，接下来，开始对 Vue 中的众多特性进行针对化的讲解。 首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令，这些指令是在模板编译阶段实现的。 1，v-if v-if 的用法如下所示： <template> <div id="app"> <h1 v-if="isShow">Hello Vue h1</h1> </div> </t
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
VUE中V-IF条件判断改变元素的样式操作
10-14
主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 9748
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
v-if和v-else和v-else-if的使用
weixin_43613849的博客
06-02 4345
1、v-if v-if的原理： v-if后面的条件为false时，对应的元素以及其子元素不会渲染。 也就是根本没有不会有对应的标签出现在DOM中。 <div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div>
Vue - v-if和v-else-if和v-else的使用
2202_75871191的博客
03-11 2537
v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model。2.不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用，v-else,v-cloak,v-once，v-pre不需要带值。当v-if后面表达式的值为false的时候显示v-else所在的元素。当v-if后面表达式的值为true的时候显示v-if所在的元素。在vue3中v-if比v-for优先级高。v-if和v-for优先级和使用事项。
Vue内置指令——v-if、v-else-if、v-else
沐小侠
06-29 7209
v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。 v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。 v-else-if充当v-if的else-if块，可以链式的使用多次。 类似JS的 if … else if … else。.........
V-if V-else-if V-else 的用法
DSs1206的博客
07-28 1万+
1.v-if（如果） 如果条件成立则执行if内的代码 2.v-else-if（否则如果） 如果前面的if 如果先前的if不成立则判断v-else-if 如果v-else-if 成立 执行代码 不成立向下执行代码 3.v-else（否则） 如果前面的if和elseif不成立则执行else内的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
vue v-if 判断某个元素满足多个条件的写法
Anything2207294253的博客
11-25 8633
我们平时使用v-if判断多个条件，如这样写法: type同时满足0,1,2三个值的时候我们这样写： v-if= "type === 0 || type === 1 || type === 2" （这样写是可以的，但代码有点冗余） 第一种，最简便的写法： v-if="[0,1,2].includes(type)" 第二种，使用方法，复用性高，使用场景：多个标签都需要用到此判断 写法：matchState（某元素，/[匹配值]/） v-if="matchState(type,/[0,1,2]/
Vue指令篇_v-if、v-else、v-else-if
桃花扇的博客
07-21 1246
1.v-if 作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。 2.v-else 3.v-else-if
VueJS条件语句：v-if、v-else、v-else-if
cxu123321的博客
08-14 220
VueJS条件语句：v-if、v-else、v-else-if HTML:if-else <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s.
vue 中 v-if和v-show的优先级
08-29
在Vue中，v-if和v-show是用于条件渲染的指令，它们有不同的优先级。 v-if是惰性渲染指令，它根据条件动态地创建或销毁元素。当条件为假时，对应的元素将被完全从DOM中移除，不会被渲染。因此，v-if在初始渲染时会有一些性能开销，但在条件变为真时，会比v-show更高效。v-if适用于在切换频率较低的情况下使用。 v-show是通过修改元素的CSS属性display来控制元素的显示与隐藏。当条件为假时，对应的元素会使用display:none来隐藏，但元素仍然存在于DOM中。因此，v-show在初始渲染时没有性能开销，但在切换频率较高的情况下可能会比v-if略微低效。 总的来说，如果需要频繁切换元素的可见状态，则使用v-show会更好。如果切换频率较低，则使用v-if可能更合适。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值