目录问题描述：固定绑定多个类名方法：动态绑定多个类名方法： 总结：问题描述： 今天遇到一个问题，就是 一个元素要动态绑定 两个或多个类名。 固定绑定多个类名方法
今天遇到一个问题，就是 一个元素要动态绑定 两个或多个类名。
绑定多个写死的类名很简单方法有如下几种：
方式一：
class 中间有空格
<div class="active vv">5555555</div>方式二：
数组形式 使用 :class 当然 直接在data里声明一个 变量也可以。
<div :class="['active','vv']">5555555</div>方式三：
借用一个方法处理
<div :class="classS()">5555555</div>methods里定义一个方法 返回 字符串 和数组都行
methods:{
classS(){
return ['vv','active'];
// return "vv active";
}
}其实动态绑定 和固定 差不多，方式是一样的，无非就是需要根据变量来判断。
以下方式 data 和 样式代码如下
data() {
return {
bb:1,
index:1,
cc:1
}
},.active{
color:red;
}
.vv{
font-size:30px;
}方式一：
三目运算符，且以数组形式 。不推荐使用这种方法，如果只有两个类名可以使用，多了的话就不好写 三目运算符了。
<div :class="bb==index&&cc==index?['active','vv']:bb==index?'active':cc==index?'vv':''">55555555555</div>方式二：
以大括号 形式
<div :class="{active:bb==index,vv:cc==index}">55555555555</div>方式三：
数组形式，每个数组项里使用 判断
<div
:class="[{active:bb==index},{vv:cc==index}]">55555555555</div>直接三目也可以
<div :class="[bb==index?'active':'',cc==index?'vv':'']">55555555555</div>方式四：
用一个方法搞定
<div
:class="classS1()">55555555555</div> classS1(){
let v = [];
if (this.index == this.bb) {
v.push("active");
}
if (this.index == this.cc) {
v.push("vv")
}
return v;
}方式一：
优点： 写法简单
缺点：写两个 以上类名时 无法写 且不利于阅读
方式二：
优点： 写法简单
缺点：当多个时 也不利于阅读
方式三：
优点： 写法简单
缺点：当多个时 也不利于阅读
方式四：
优点： 写法简单 ，利于阅读 ，而且可以添加 很多 判断
缺点：无
如果是 两个及两个以下 方式一、方式二、方式三、方式四都可以 。
如果是 两个以上 方式二、方式三、方式四 这个 我建议还是 用方式四 看起来很清爽。
在线示例：
Vue 动态绑定多个类名
到此这篇关于vue动态绑定多个类名方法的文章就介绍到这了,更多相关vue :class动态绑定多个类名内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: vue动态绑定多个类名方法详解(:class动态绑定多个类名)
本文链接: https://www.lsjlt.com/news/172974.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0