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

news2024/11/28 21:38:01

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

父组件:

父组件传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.coloradmin.cn/o/1318456.html

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

相关文章

diffuser库之 Load pipelines, models, and schedulers 的阅读记录

加载不同pipeline safe checker pipeline转换 加载模型配置 远程库与本地库使用区别 本地库必须引入variant参数用于选择加载哪一种模型 保存模型 修改pipeline的scheduler pipeline class以及各个子模块的定义

保护性地编写readObject方法

在Java中&#xff0c;通过谨慎保护性地编写 readObject 方法&#xff0c;我们可以在对象反序列化的过程中加入额外的安全检查和验证&#xff0c;以确保反序列化后的对象的状态是合法和安全的。以下是一个简单的例子&#xff0c;演示如何保护性地编写 readObject 方法&#xff1…

表格el-tooltip和show-overflow-tooltip衝突

表格el-tooltip和show-overflow-tooltip衝突&#xff1a; 二、产品需要实现的效果如下 三、解决文案 1、HTML代码 <el-table:data"tableData"header-row-class-name"custom-table-header"header-cell-class-name"custom-table-header-cell"…

【高效写作技巧】文章质量分有什么用?如何提高质量分

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《写作技巧》 《C嘎嘎干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! &#x1f4cb; 前言 &#x1f308;hello&#xff01; 各位铁铁们大家好啊&#xff0c;这段时间接触了一些刚开始写作的新人…

Command line is too long. Shorten command line for Application or also

一、问题描述 Error running ‘Application’: Command line is too long. Shorten command line for Application or also for Spring Boot default configuration? 二、原因分析 springboot项目启动命令过长&#xff01; 三、解决方案 第1步:点击项目启动配置项 第2步…

Python 爬虫之简单的爬虫(二)

爬取百度热搜榜 文章目录 爬取百度热搜榜前言一、展示哪些东西二、基本流程三、前期数据获取1.引入库2.请求解析获取 四、后期数据处理1.获取保存 总结 前言 每次打开浏览器&#xff0c;我基本上都会看一下百度热搜榜。这篇我就写一下如何获取百度的热搜榜信息吧。 如果到最后…

C++ list常用操作

目录 一、介绍 二、list的常用操作 1、构造 2、迭代器 3、元素访问 4、容量操作 一、介绍 std::list文档链接 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个…

D3D12可编程渲染流水线

一、初始化D3D库 启用 DirectX数学库 x86需要启用SSE2指令集&#xff0c;所有平台均需将浮点模型设置为fast。默认为&#xff1a; 精度 (/fp:precise)。 #include <DirectXMath.h> #include <DirectXPackedVector.h> 启用调试模式下的内存泄漏检测 // Enabl…

android studio 创建按钮项目

1&#xff09;、新建一个empty activity项目&#xff0c;切换到project视图&#xff1a; 2&#xff09;、修改app\src\main\res\layout\activity_main.xml文件&#xff0c;修改后如下&#xff1a; <?xml version"1.0" encoding"utf-8"?> <andr…

qemu 虚拟机

文章目录 一、参考资料二、QEMU调试参数三、QEMU 命令 一、参考资料 # 查询 qemu 包 apt list | grep qemu# 查询已安装的 qemu 包 apt list --installed | grep qemu # 查询 qemu 版本 qemu-img -V # 安装 sudo apt-get install qemu-system-arm qemu-system-mips qemu-syste…

【机器学习 | 假设检验系列】假设检验系列—卡方检验(详细案例,数学公式原理推导),最常被忽视得假设检验确定不来看看?

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

Ansible介绍与安装

Ansible目前是运维自动化工具中最简单、容易上手的一款优秀软件&#xff0c;能够用来管理各种资源。用户可以使用Ansible自动部署应用程序&#xff0c;以此实现IT基础架构的全面部署。例如&#xff0c;借助于Ansible&#xff0c;我们可以轻松地对服务器进行初始化配置、安全基线…

centOS7 安装tailscale并启用子网路由

1、在centOS7上安装Tailscale客户端 #安装命令所在官网位置&#xff1a;https://tailscale.com/download/linux #具体命令为&#xff1a; curl -fsSL https://tailscale.com/install.sh | sh #命令执行后如下图所示2、设置允许IP转发和IP伪装。 安装后&#xff0c;您可以启动…

智安网络|企业网络安全工具对比:云桌面与堡垒机,哪个更适合您的需求

随着云计算技术的快速发展&#xff0c;越来越多的企业开始采用云计算解决方案来提高效率和灵活性。在云计算环境下&#xff0c;云桌面和堡垒机被广泛应用于企业网络安全和办公环境中。尽管它们都有助于提升企业的安全和效率&#xff0c;但云桌面和堡垒机在功能和应用方面存在着…

订单管理系统开发经验的总结:优化流程、提升效率的关键实践

前言 一.订单管理系统的架构设计 二.订单系统的详细设计 1.拆分 2.换货 3.发货 4.拦截 5.取消 6.物流回传 三.订单系统的订单状态流转 初始状态 中间状态 异常状态 终态 四.订单系统的关键代码逻辑 五.结语 前言 两年来&#xff0c;整个订单管理系统经过大大小…

7. 数据存储

7. 数据存储 文章目录 7. 数据存储7.1 基本存储7.1.1 EmptyDir7.1.2 HostPath7.1.3 NFS 7.2 高级存储7.2.1 PV7.2.2 PVC7.2.3 生命周期 7.3 配置存储7.3.1 ConfigMap7.3.2 Secret 在前面已经提到&#xff0c;容器的生命周期可能很短&#xff0c;会被频繁地创建和销毁。那么容器…

java设计模式学习之【外观模式】

文章目录 引言外观模式简介定义与用途实现方式 使用场景优势与劣势外观模式在Spring中的应用图形示例代码地址 引言 软件开发有点像烹饪一道美味佳肴&#xff0c;涉及的材料和步骤可能会让人眼花缭乱。就像在一家大型餐厅厨房中&#xff0c;有许多不同的厨房工具和设备&#x…

PVE系列-防火墙的免费安静之旅IPfire

Ventoy一款引导盘可以引导各种启动盘安装盘的工具https://www.ventoy.net/cn/index.html 在它的兼容iso的列表 中发现了Ipfirehttps://wiki.ipfire.org/ &#xff0c;本来用着openwrt也挺好&#xff0c;忍不住的虚拟机尝了尝鲜&#xff0c;发现的功能有2&#xff0c; 安全吧&a…

Windows安装Elasticsearch并结合内网穿透实现公网远程访问

Windows安装Elasticsearch并结合内网穿透实现公网远程访问 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜…

Lumerical 技巧------Plot in New Window

Lumerical 技巧------Plot in New Window 简介正文 简介 当我们在计算模式分布后想要观察模式对应的图像&#xff0c;为了清晰地观察到一些细节&#xff0c;我们可以通过点击图像绘制窗口的 Plot in New Window 按键来实现。 正文 默认模式绘制图像如下&#xff1a; 窗口很…