vue动态绑定class的几种方式

article/2025/10/2 17:38:04

参考链接:vue动态绑定class的几种方式 - 走看看

vue动态绑定class的几种方式:

方式①:直接三元表达式判断,动态绑定类名

:class="isUsed ? 'ruleUsedLabel' : 'ruleUnusedLabel'"


方式②:绑定对象

(1)绑定单个class


(2)若要绑定多个class,需要逗号隔开就行:(这里的activeTwo加不加引号都可以,也一样都能渲染,如下)



方式③:绑定的是数据对象




方式④:绑定一个返回对象的计算属性



方式⑤:绑定单独数组方式


方式⑥:数组与三元运算符结合判断选择需要的class


http://chatgpt.dhexx.cn/article/8s3mmd7e.shtml

相关文章

初学必懂—vue绑定class的几种方式+绑定内联样式总结

文章目录 本篇博客主要学习内容🌼对象语法🌺数组语法🍍绑定内联样式🍉 本篇博客主要学习内容🌼 先来看看以下这些语句都熟不熟悉吧!这些节选于后续的博客内容🌻🌻🌻 &l…

22.Vue绑定class样式

目录 1.绑定class样式-字符串写法(适用于样式的类名不确定,需要动态指定) 2.绑定class样式-数组写法(适用于样式的个数不确定,名字也不确定) 3.绑定class样式-对象写法(适用于样式的个数确定…

Vue基础知识总结 2:vue 动态绑定

🏆作者简介:哪吒,CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪,专注Java硬核干货分享,立志做到Java赛道全网Top N。 🏆本文收录于,Java基础教程系列…

SQL语句:将查询结果合并一起,语句优化

需求驱动 为了使得表格更好看些,我需要把查询结果合在一起,这样看起来就是一体的了。主要是性能测试有需求: 1、查询当前库设备 2、查询新增设备 3、计算每秒鉴权数 这个对我来说比较简单,分开查询就可以了。但我对自己不能要求这…

sql查询将多个结果合并成一个字符串(GROUP_CONCAT和CONCAT)

完整语法如下 group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator 分隔符]) SELECT * FROM testgroup 表结构与数据如上 现在的需求就是每个id为一行 在前台每行显示该id所有分数 group_concat 上场!!! SELECT…

Mysql合并两个sql结果

第一条sql及结果 SELECT value4 AS ‘压缩机功率’, create_date AS ‘时间’ FROM gree_data WHERE data_belong ‘External_05’ AND create_date > ‘2019-10-23 17:03:59’ ORDER BY create_date 结果展示: 第二条sql及结果 SELECT value2 AS ‘工作模…

sql——合并两个sql的结果

表结构 iot_street_road表: iot_street_staff_road表: iot_street_tree表: 想得到结果: road_namestaff_counttree_count街道名工人数量苗木数量 实现方法: 把表一和表二、表一和表三分别按road_id聚合,得到的结果合…

SQL查询结果拼接

Sql查询结果进行拼接 对查询结果进行拼接,可使用group_concat(),concat(),concat_ws()函数。简单介绍下如何应用。 Mysql中的group_concat() 功能:可以group by产生的同一分组的值连接起来,返回一个字符串。 参数格式&#xff…

sql查询结果合并

使用group_concat合并多行查询结果为一行select gs.id id,gs.gs_no gs_no,gs.apply_date apply_date,gs.create_by create_by,group_concat(gd.name) name,gs.apply_description apply_description,gd.unit_name unit_name,gs.apply_status apply_status,gs.apply_by apply_by …

oracle 将多个查询结果合并

首先要区分一个概况,多个查询结果分两种,一种是一条sql查询多个结果,还有一种是多条sql语句查询出多个结果。 先看第一个,一条语句查询出多个结果,将多个结果合并成一条记录: 在oracle中有一个wm_concat()函…

mysql 合并两个查询结果

合并两个查询结果 查询结果1: select date(complete_time) as time,sum(amt) as amount_out from withdraw where state3 group by date(complete_time) 查询结果2 select date(update_time) as time,sum(transfer_amount) as amount_in from user_charge where st…

SQL合并查询数据,以逗号分隔

功能描述: 将查询到的数据合并为一条数据,以逗号分隔 案例: 功能描述: 现有三张表: Student(学生表) Course(课程表) Student-Course(学生课程关联表&am…

MySQL合并查询结果

利用 UNION 关键字,可以给出多条 SELECT 语句,并将它们的结果组合成单个结果集。合并 时,两个表对应的列数和数据类型必须相同。各个 SELECT 语句之间使用 UNION 或 UNION ALL 关键字分隔。UNION 不使用关键字 ALL,执行的时候删除…

SQL如何使两个select语句查询结果合并一个

SQL如何使两个select语句查询结果合并一个? ——在网上看到别人遇到的情况,觉得有点意思,先收集下来~ 解决办法: select isnull(a.unit,b.fine_units) unit,isnull(a.number,0) number,isnull(b.fine_number,0) fine_numberfrom…

sqlsever2019:union合并多个查询结果

文章目录 一、前言二、区别union和连接三、union实例四、union all合并表五、union中的oder by子句六、union自动数据类型转换七、使用union合并不同类型的数据八、union合并不同列数的两个表九、union多表合并 一、前言 表的合并操作将两个表的行合并到一个表中,不…

SQL 列不同的表查询结果合并

两个不同的表进行查询,需要把结果合并, 比如table1的列为 id, user_id, type_id,pro_id; table2的列为 id,user_id,collect_id;分别如下图所示 table1: table2: 将两个表的查询结果合并到一起的查询语…

SQL多个查询结果拼接

今天有一个需求,我有三张表,一张学生表,一张教师表,一样辅导员。 它们都有编号,都有密码,但是字段名不一样,我想一次查询出三张表里面这些编号和密码放在一个查询结果集里面! 我们可…

各数据库SQL查询结果多行数据合并成一行

SQL查询结果多行数据合并成一行 一、Oracle函数多行数据合并成一行二、Mysql函数多行数据合并成一行三、sqlserver函数多行数据合并成一行四、postgresql函数多行数据合并成一行 业务需要需要在oracle函数里把多行数据合并成一行,顺道发挥下常用的几种方法。 一、O…

【sql语句基础】——查(select)(合并查询)

目录 合并查询单独查询合并查询——UNION ALLUNION ALL定义UNION ALL代码示例UNION ALL查询结果 合并查询——UNION ALLUNION 定义UNION 代码示例UNION 查询结果 合并查询 当我们需要将多个select查询结果合并在一起的时候,可以使用集合操作符号:union …

微信小程序-循环语句的使用

循环语句的使用 小程序中的循环语句 for,就是在.js中定义循环的数组,把要循环的数据写到数组里面,然后再到*.wxml中进行逐一展示就行了。这里结合一下icon标签的属性来演示 循环语句的基本使用。 重点需要明白的是:小程序中的 fo…