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

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

父组件:

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

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

代码:

<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  

以此类推。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/223779.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA调整内存大小

一、IDEA开启内存显示 双击shift,搜索show memory indicator 打开后重启&#xff0c;右下角显示IDEA内存占用情况 开启后右下角会显示 二、调整内存 双击shift,搜索vmoption 修改-Xms和-Xmx参数&#xff0c;如下&#xff1a; -Xms:最小内存 -Xmx:最大内存 设置完成后&…

阅读代码的记录

1-utils_metrics.py用在train.py中做指标衡量&#xff0c;现在想在推理&#xff08;predict.py&#xff09;的时候衡量一下指标 2-调研眼睛部位的单独分割。 https://blog.csdn.net/qq_40234695/article/details/88633094 衡量图像语义分割准确率主要有三种方法&#xff1a; …

js 实现图片上传

<style>.showFile{width: 200px;height: 200px;border: 1px solid blue;}.showFile img{width: 100px;height: 100px;} </style> <div><input type"file" id"file" multiple><!--展示所上传的文件--><div class"sho…

鸿蒙原生应用/元服务开发-Stage模型能力接口(五)

说明 Common模块将二级模块API组织在一起方便开发者进行导出。本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。本模块接口仅可在Stage模型下使用 二、 导入模块 import common from ohos.app.ability.common; 三、 …

系列五、DQL

一、DQL 1.1、概述 DQL的英文全称为&#xff1a;Data Query Language&#xff0c;中文意思为&#xff1a;数据查询语言&#xff0c;用大白话讲就是查询数据。对于大多数系统来说&#xff0c;查询操作的频次是要远高于增删改的&#xff0c;当我们去访问企业官网、电商网站&…

LeetCode刷题--- 二叉树的所有路径

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 【 http://t.csdnimg.cn/yUl2I 】 【C】 【 http://t.csdnimg.cn/6AbpV 】 数据结构与算法 【 http://t.csdnimg.cn/hKh2l 】 前言&…

Java架构师-数据机构与算法实战(第一篇)

数学知识回顾 指数 指数函数是重要的基本初等函数之一。一般地&#xff0c;ya^x函数(a为常数且以a>0&#xff0c;a≠1)叫做指数函数&#xff0c;函数的定义域是 R 。注意&#xff0c;在指数函数的定义表达式中&#xff0c;在a^x前的系数必须是数1&#xff0c;自变量x必须在…

车载测试包括哪些测试

车载测试包括CW测试和现网测试。以下是相关介绍&#xff1a; CW测试&#xff1a; 即在典型区域架设发射天线&#xff0c;发射单载被信号&#xff0c;然后在预先设定的路线上进行车载测试&#xff0c;使用车载接收机接收并记录各处的信号场强。CW测试频率和环境选择方便&#…

如何拍摄超级大像素图片,超级大像素有哪些应用

引言&#xff1a; 在数字摄影领域&#xff0c;超级大像素照片是指通过高像素的相机或拼接多张照片合成的照片。这样的照片具有更高的分辨率&#xff0c;细节更加清晰&#xff0c;绘画质感更强。那么如何拍摄超级大像素照片&#xff0c;超级大像素可以用在哪些领域呢。 一&…

如何做到人均告警减少 90%?B 站新一代告警平台的设计与实践

一分钟精华速览 B 站的业务规模和用户群体不断扩大&#xff0c;对于服务的稳定性和可用性的要求也日益增高。这就需要 B 站的监控告警系统能够及时、准确地发现和定位问题&#xff0c;以便尽快解决&#xff0c;维护好用户的使用体验。 本文是对 B 站在告警监控系统上的一次重…

小红书可观测 Metrics 架构演进,如何实现数十倍性能提升?

在当前云原生时代&#xff0c;随着微服务架构的广泛应用&#xff0c;云原生可观测性概念被广泛讨论。可观测技术建设&#xff0c;将有助于跟踪、了解和诊断生产环境问题&#xff0c;辅助开发和运维人员快速发现、定位和解决问题&#xff0c;支撑风险追溯、经验沉淀、故障预警&a…

MATLAB图解傅里叶变换(初学者也可以理解)

1、概述 相信很多人对于傅里叶变换可能觉得比较复杂和有点难懂&#xff0c;其实不难&#xff0c;它只是一种积分变换。 傅里叶变换&#xff0c;表示能将满足一定条件的某个函数表示成三角函数&#xff08;正弦和/或余弦函数&#xff09;或者它们的积分的线性组合。也就是说&qu…

『 Linux 』进程地址空间概念

文章目录 &#x1fad9; 前言&#x1fad9; 进程地址空间是什么&#x1fad9; 写时拷贝&#x1fad9; 可执行程序中的虚拟地址&#x1fad9; 物理地址分布方式 &#x1fad9; 前言 在c/C中存在一种内存的概念; 一般来说一个内存的空间分布包括栈区,堆区,代码段等等; 且内存是…

Notes2024节气和日历来了

大家好&#xff0c;才是真的好。 还有三周就是2024年了。 2024的节假日安排其实早就发布&#xff0c;有些人已经把这些节假日安排都写在自己的日历上了&#xff1b;同时我们这里也设置了一份&#xff0c;包括节假日和农历二十四节气以及中西传统的节日日期等。 如果你需要的…

均匀分布的随机变量

如果连续型随机变量的概率密度满足如下公式&#xff1a; 那么就称在区间(a,b)上服从均匀分布&#xff0c;记为。

国际语音呼叫中心有什么功能特点?

国际语音呼叫中心的功能特点 智能客服 国际语音呼叫中心通过智能客服系统&#xff0c;可以为客户提供快捷、高效的服务。可以根据客户需求&#xff0c;自动回答部分常见问题&#xff0c;提高客户服务效率。 个性化定制 国际语音呼叫中心平台可以根据客户需求&#xff0c;为…

el-tree搜索的使用

2023.12.11今天我学习了如何对el-tree进行搜索的功能&#xff0c;效果如下&#xff1a; 代码如下&#xff1a; 重点部分&#xff1a;给el-tree设置ref&#xff0c;通过监听roleName的变化过滤数据。 default-expand-all可以设置默认展开全部子节点。 check可以拿到当前节点的…

线程安全集合类

文章目录 1. ConcurrentHashMap2. LinkedBlockingQueue 阻塞队列3. ConcurrentLinkedQueue4. CopyOnWriteArrayList JDK1.7 hashmap采用数组加链表头插的方式&#xff0c;在扩容时会出现循环死链问题&#xff0c;A->B->C扩容后C->B->A AB BA出现循环死链。 1. Conc…

msvcp140.dll丢失怎么办?这些方法值得一试

小编将探讨计算机系统中MSVCP140.DLL文件的重要性及其潜在的问题和相应的修复措施。此文件对实现软件应用的特定功能起着关键性的作用&#xff0c;当其丢失时&#xff0c;某些运行环境下的应用程序和游戏便无法正常运作。因此&#xff0c;了解并解决相关问题非常必要。 一、msv…

SpringBoot Maven 项目打包的艺术--主清单属性缺失与NoClassDefFoundError的优雅解决方案

Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError 文章目录 Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError1、问题出现1.1、Jar包运行&#xff1a;没有主清单属性解决方…