vue动态绑定多个类名方法详解(:class动态绑定多个类名)
崽崽的谷雨 人气:0问题描述:
今天遇到一个问题,就是 一个元素要动态绑定 两个或多个类名。
固定绑定多个类名方法:
绑定多个写死的类名很简单方法有如下几种:
方式一:
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; }
总结:
方式一:
优点: 写法简单
缺点:写两个 以上类名时 无法写 且不利于阅读
方式二:
优点: 写法简单
缺点:当多个时 也不利于阅读
方式三:
优点: 写法简单
缺点:当多个时 也不利于阅读
方式四:
优点: 写法简单 ,利于阅读 ,而且可以添加 很多 判断
缺点:无
如果是 两个及两个以下 方式一、方式二、方式三、方式四都可以 。
如果是 两个以上 方式二、方式三、方式四 这个 我建议还是 用方式四 看起来很清爽。
在线示例:
加载全部内容