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

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

父组件:

父组件传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.mfbz.cn/a/248344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jrebel 在 Idea 2023.3中无法以 debug 的模式启动问题

Jrebel 在 Idea 2023.3中无法以 debug 的模式启动问题 Idea 在升级了2023.3以后&#xff0c;Jrebel 无法以 debug 的模式启动&#xff0c;找了半天&#xff0c;最后在插件主页的评论区找到了解决方案 特此记录一下

Springboot+vue的公寓报修管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的公寓报修管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的公寓报修管理系统&#xff0c;采用M&#xff08;model&…

HarmonyOS使用HTTP访问网络

HTTP数据请求 1 概述 日常生活中我们使用应用程序看新闻、发送消息等&#xff0c;都需要连接到互联网&#xff0c;从服务端获取数据。例如&#xff0c;新闻应用可以从新闻服务器中获取最新的热点新闻&#xff0c;从而给用户打造更加丰富、更加实用的体验。 那么要实现这样一种…

Android 12.0 Launcher3定制化之动态时钟图标功能实现

1.概述 在12.0的系统产品rom定制化开发中,在Launcher3中的定制化的一些功能中,对于一些产品要求需要实现动态时钟图标功能,这就需要先绘制时分秒时针表盘,然后 每秒刷新一次时钟图标,时钟需要做到实时更新,做到动态时钟的效果,接下来就来分析这个功能的实现 如图: 2.动…

Gartner发布2024年网络安全预测一:人工智能与网络安全将颠覆转化为机遇

Gartner 预测人工智能将以积极的方式持久地破坏网络安全&#xff0c;但也会造成许多短期的幻灭。安全和风险管理领导者需要接受 2023 年只是生成式 AI 的开始&#xff0c;并为其演变做好准备。 主要发现 生成式人工智能 (GenAI) 是一系列公认的颠覆性技术中的最新技术&#xff…

nodejs+vue+微信小程序+python+PHP全国天气可视化分析系统-计算机毕业设计推荐

3.2.1前台用户功能 前台用户可分为未注册用户需求和以注册用户需求。 未注册用户的功能如下&#xff1a; 注册账号&#xff1a;用户填写个人信息&#xff0c;并验证手机号码。 浏览天气资讯&#xff1a;用户可以浏览天气资讯信息详情。 已注册用户的功能如下&#xff1a; 登录&…

安装统信UOS服务器操作系统1060

原文链接&#xff1a;安装统信UOS服务器操作系统1060 hello&#xff0c;大家好啊&#xff01;今天我要给大家介绍的是如何安装统信UOS服务器操作系统1060。统信UOS是一款基于Linux内核&#xff0c;专为中国市场定制开发的操作系统。它不仅提供了良好的用户体验&#xff0c;还在…

MySQL事务与MVCC详解

前置概念之事务 在开始MVCC的讨论之前&#xff0c;我们必须了解一些关于事务的概念。 什么是事务 现在我们开发的一个功能需要进行操作多张表&#xff0c;假如我们遇到以下几种情况: 某个逻辑报错数据库连接中断某台服务器突然宕机… 这时候我们数据库执行的操作可能才到一…

黑马点评04集群下的并发安全

实战篇-08.优惠券秒杀-集群下的线程并发安全问题_哔哩哔哩_bilibili 为了应对高并发&#xff0c;需要把项目部署到多个机器构成集群&#xff0c;所以需要配置nginx。 1.如何模拟集群 通过idea的ctrl d修改配置&#xff0c;实现多个tomcat运行模拟集群 然后在nginx上配置节点&…

菜鸟学习日记(python)——函数

函数是组织好的&#xff0c;用来实现某些功能的代码块&#xff0c;它可以重复使用。 函数能提高应用的模块性&#xff0c;和代码的重复利用率。Python提供了许多内建函数&#xff0c;比如print()。但我们也可以自己创建函数&#xff0c;这被叫做用户自定义函数。 定义函数 用…

可视化数据监控大屏网页界面,数据大屏模版PS资料(免费UI源文件)

数据大屏模板在大数据领域被广泛应用&#xff0c;其优势在于能够将复杂的数据通过图形、图表等方式呈现出来&#xff0c;使数据更易于理解。数据大屏模板可以用来进行数据分析。通过对数据的比较、趋势分析、异常检测等&#xff0c;可以发现数据中的规律和问题&#xff0c;为决…

[蓝桥杯刷题]合并区间、最长不连续子序列、最长不重复数组长度

前言 ⭐Hello!这里是欧_aita的博客。 ⭐今日语录: 成功的关键在于对目标的持久追求。 ⭐个人主页&#xff1a;欧_aita ψ(._. )>⭐个人专栏&#xff1a; 数据结构与算法 数据库 文章目录 前言合并区间问题&#x1f4d5;现实应用大致思路代码实现代码讲解 最长不连续子序列&a…

《Kotlin核心编程》笔记:面向对象

kotlin 中的类 // Kotlin中的一个类 class Bird {val weight: Double 500.0val color: String "blue"val age: Int 1fun fly() { } // 全局可见 }把上述代码反编译成Java的版本&#xff0c;然后分析它们具体的差异&#xff1a; public final class Bird {privat…

一种用于心音分类的轻量级1D-CNN+DWT网络

这是由National Institute of Technology Rourkela, Central University of Rajasthan发布在2022 ICETCI的论文&#xff0c;利用离散小波变换(DWT)得到的多分辨率域特征对1D-CNN模型进行心音分类训练。 预处理& DWT 由于FHS和各种病理声的频率范围在500hz以下[5]&#xff…

华为配置VRRP负载分担示例

组网需求 如图1所示&#xff0c;HostA和HostC通过Switch双归属到SwitchA和SwitchB。为减轻SwitchA上数据流量的承载压力&#xff0c;HostA以SwitchA为默认网关接入Internet&#xff0c;SwitchB作为备份网关&#xff1b;HostC以SwitchB为默认网关接入Internet&#xff0c;Switc…

智能高效的Go开发工具GoLand v2023.3发布,支持AI辅助编码!

GoLand 使 Go 代码的阅读、编写和更改变得非常容易。即时错误检测和修复建议&#xff0c;通过一步撤消快速安全重构&#xff0c;智能代码完成&#xff0c;死代码检测和文档提示帮助所有 Go 开发人员&#xff0c;从新手到经验丰富的专业人士&#xff0c;创建快速、高效、和可靠的…

力扣785.判断二分图

存在一个 无向图 &#xff0c;图中有 n 个节点。其中每个节点都有一个介于 0 到 n - 1 之间的唯一编号。给你一个二维数组 graph &#xff0c;其中 graph[u] 是一个节点数组&#xff0c;由节点 u 的邻接节点组成。形式上&#xff0c;对于 graph[u] 中的每个 v &#xff0c;都存…

win10环境下git安装和基础操作

简述 关于git的作用就不多赘述了&#xff0c;配合GitHub&#xff0c;达到方便人们日常项目维护和管理&#xff0c;每一次项目增删改查都可以看的清清楚楚&#xff0c;方便团队协作和个人项目日常维护。 下载git 首先我们自然是要到官网下载git&#xff0c;下载地址为https:/…

【日常笔记】notepad++ 正则表达式基本用法

一、场景 二、正则表达式--语法 2.1、学习基本的匹配字符&#xff1a; 2.2、学习特殊字符和量词&#xff1a; 2.3、学习转义字符 2.4、学习分组和捕获 2.5、区分大小写 和 匹配整个单词 2.6、引用分组 三、实战 ▶ 希望把课程目录中 -- 前面的都去掉 一、场景 希望把…

Linux第一个小程序——进度条

Linux第一个小程序——进度条 1. 前言2. 缓冲区概念3. \r && \n4. 进度条实现4.1 初级进度条4.2 升级进度条 1. 前言 在我们写这个小程序之前&#xff0c;我们要用到我们学的三个知识点 gcc的使用vim的使用make/makefile的使用 除此之外还需要一些其他的知识点&…