多条件三元表达式如何写?

在某些业务需求情况下,如何书写多条件三元表达式?(例如,父组件传值给子组件,子组件根据不同的值去响应不同的颜色变化该如何实现?)

父组件:

父组件传testData的值给子组件,这个是我自定义的,如果是真正项目,前后端交互,后端传递的值是动态的会变化。

子组件:(红线部分即为多添建三元表达式的写法)

代码:

javascript 复制代码
<template>
    <div>
        <h3>组件1---文字</h3>
        <span :class="chartData==0 ? 'a' : chartData== 1 ? 'b' : chartData== 2 ? 'c' : 'd'">我爱你,中国!</span>
    </div>
</template>
<script>
    export default {
        props:{
            chartData:{
                type:Number,
                default:0
            }
        }
    }
</script>
<style scoped>
.a {
    color: red;
}
.b {
    color: aqua;
}
.c {
    color: blue;
}
.d {
    color: blueviolet;
}
</style>

总结:多条件三元表达式的写法就是条件a ? 结果1:条件b ? 结果2 :条件c ?结果3:结果4

以此类推。

相关推荐
无敌最俊朗@15 分钟前
SQLite 约束 (Constraints) 面试核心知识点
java·开发语言·jvm
憨憨崽&41 分钟前
C语言、Java、Python 的选择与未来发展以及学习路线
java·c语言·python
yume_sibai1 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书1 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码1 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_1 小时前
手写自己的小型react
前端·javascript·react.js
在坚持一下我可没意见1 小时前
Java 网络编程:TCP 与 UDP 的「通信江湖」(基于UDP回显服务器)
java·服务器·开发语言·tcp/ip·udp·java-ee
嘀咕博客1 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit1 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
少爷晚安。1 小时前
Java零基础学习完整笔记,基于Intellij IDEA开发工具,笔记持续更新中
java·笔记·学习