vue3 样式绑定class绑定

article/2025/10/2 17:52:30

class绑定1:class=sty为一个变量,当用''引起来时为一个字符串,sty其值为vm中data的box1取box1样式,触发点击事件后sty取值为sty2,取的sty2的样式。

class2样式绑定二

 class 类名为多类名,类名为对象中的属性,属性名作为类名,属性值取的是vm里面的变量,取值为布尔值,当为ture的时候相应的类名样式通过点击事件进行渲染。

class样式绑定3

数组语法

 数组中可以输入对象,字符串,以及变量,当用单引号引起来的时候类名为字符串,不引起来的时候类名为变量取得VM中的变量值,对象中{box2:n2}类名为box2、n2为变量取值为布尔值,作用是触发box2样式

当box1、n1、box多类命又有自己的样式的时候,一般情况其中样式都会执行,相同的样式会根据渲染的顺序,执行最后一个相同样式,如果类名为id,id优先级高,相同的样式取优先级高的。


http://chatgpt.dhexx.cn/article/Jti5bIxZ.shtml

相关文章

Vue.js绑定class属性

绑定class属性的格式是 v-bind:class "语句", 可以缩写为 :class "语句" 。class属性是可以有多个的,在" "内可以有多种不同的情况。下面介绍在" "写入的不同情况。 目录 一、" "内是vue对象内存在的对…

vue动态绑定class的几种方式

参考链接:vue动态绑定class的几种方式 - 走看看 vue动态绑定class的几种方式: 方式①:直接三元表达式判断,动态绑定类名 :class"isUsed ? ruleUsedLabel : ruleUnusedLabel" 方式②:绑定对象 &#xf…

初学必懂—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…