vue三元运算之多重条件判断方式(多个枚举值转译)

目录
  • vue多重条件判断(多个枚举值转译)
  • vue标签中使用三元运算符

vue多重条件判断(多个枚举值转译)

直接上代码：

div class="msgLi">
     <p>组织设置:</p>
     <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.partySetup=="3"?"更名":organInfo.partySetup }}</p>
</div>

vue标签中使用三元运算符

<span :class="`${s2?'s2':'step2}`"></span>
  <a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>
<span :class="['menu',{statusClass:startStatus}]"></span>
  • 如果 status为1，样式为redRoom
  • 如果 status为2，样式为greenRoom1
  • 如果 status为其他，样式为greenRoom2
:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中如何添加枚举

    目录 vue项目添加枚举 在vue文件中引用 使用方法 vue中枚举的使用 1. 建一个js文件如:common.js 2. 在页面直接引入 vue项目添加枚举 添加文件,文件名为enum.js 文件内容: //使用方法 /** * 获取枚举值:STATUSMAP.SH * 获取枚举描述:STATUSMAP.getDesc('SH') * 通过枚举值获取描述:STATUSMAP.getDescFromValue('TG') */ let STATUSMAP = createEnum({ SH:

  • vue动态绑定多个class以及带上三元运算或其他条件

    目录 动态绑定多个class带上三元运算或其他条件 动态绑定属性 例子 实现 一个标签中含有多个class(其中包含三元表达式)的写法 1.数组形式 2.字符串拼接 动态绑定多个class带上三元运算或其他条件 动态绑定属性 在v-for循环中,根据需求,在10条数据里,前3条添加不一样的样式. 例子 设置第一条数据的样式为one <li v-for="(item,index) in items" :key="index">     <span :

  • vue3声明字段名为枚举的类型详解

    目录 vue3声明字段名为枚举类型 下面是Type的枚举声明,共有6个字段 vue使用提升之"枚举"应用 方式一(适用于简易过滤器中) 方拾二(过滤器,循环列表) vue3声明字段名为枚举类型 下面是Type的枚举声明,共有6个字段 enum Type {   primary = "primary",   success = "success",   warning = "warning",   warn = "wa

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • 关于mybatis if else if 条件判断SQL片段表达式取值和拼接问题

    关于mybatis if else if 条件判断SQL片段表达式取值和拼接问题

    前言 最近在开发项目的时候涉及到复杂的动态条件查询,但是mybaits本身不支持if elseif类似的判断但是我们可以间接通过 chose when otherwise 去实现其中choose为一个整体 when是if otherwise是else 快速使用 以前我们进行条件判断时候使用if标签进行判断,条件并列存在 <if test="seat_no != null and seat_no != '' "> AND seat_no = #{seat_no} </i

  • Mybatis条件if test如何使用枚举值

    Mybatis条件if test如何使用枚举值

    目录 Mybatis条件if test使用枚举值 1.正确 2.错误 Mybatis里使用枚举Enum判断 TestTypeEnum定义如下 Mybatis条件if test使用枚举值 1.正确 package com.weather.weatherexpert.common.utils; /** * <p>Title: </p> * <p>Description: </p> * * @Author * @CreateTime */ public enum

  • Python中条件判断语句的简单使用方法

    最简单的条件语句: if expression: expr_true_suite 如上,if是关键字,expression是条件表达式,条件表达式支持多重条件判断,可以用布尔操作符and.or和not连接,expr_true_suite是代码块,expression为true时执行,代码块如果只有一行,上面的整个条件语句便可全部写到一行,但可读性差. 带elif和else的条件语句: if expression1: expr1_true_suite elif expression2: expr2

  • Shell脚本中if条件判断的写法实例

    目录 前言 条件判断格式 if 语句 条件判断类型 按照文件权限进行判断 文件之间比较 整数之间比较 字符串的判断 多重条件判断 附:Shell if 判断语句参数 总结 前言 if…else… 可以说是我们在编程中最常见的条件判断语句了,那么在 Shell 中如何使用呢?如何判断两个数值相等?如何判断一个文件是否存在?跟随这篇文章,一起来学习吧! 条件判断格式 在 Shell 中有两种判断格式,分别如下: # 1. 第一种 test  条件判断式 # 2. 第二种,注意括号两端必须有空格 [

  • Nginx中if语句的判断条件与多条件判断详解

    一.if语句中的判断条件(nginx)介绍 1.正则表达式匹配: ==:等值比较; ~:与指定正则表达式模式匹配时返回"真",判断匹配与否时区分字符大小写: ~*:与指定正则表达式模式匹配时返回"真",判断匹配与否时不区分字符大小写: !~:与指定正则表达式模式不匹配时返回"真",判断匹配与否时区分字符大小写: !~*:与指定正则表达式模式不匹配时返回"真",判断匹配与否时不区分字符大小写: 2.文件及目录匹配判断: -f,

  • vue 动态添加class,三个以上的条件做判断方式

    如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 如果 status为其他,样式为greenRoom2 :class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}" 补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还

  • vue实现条件判断动态绑定样式的方法

    在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,

  • Vue 根据条件判断van-tab的显示方式

    我就废话不多说了,大家还是直接看代码吧~ .vue <van-tabs v-model="activeTab"> <van-tab title="XXX" v-if="isShow"></van-tab> <van-tab title="XXX"></van-tab> </van-tabs> .ts private activeTab = 0; priva

随机推荐