vue动态绑定多个类名方法详解(:class动态绑定多个类名)

问题描述：

今天遇到一个问题，就是 一个元素要动态绑定 两个或多个类名。

固定绑定多个类名方法：

绑定多个写死的类名很简单方法有如下几种：

方式一：

 class 中间有空格

5555555

方式二：

数组形式 使用 :class 当然 直接在data里声明一个 变量也可以。

5555555

方式三：

借用一个方法处理 

5555555

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;
}

方式一：

三目运算符，且以数组形式 。不推荐使用这种方法，如果只有两个类名可以使用，多了的话就不好写 三目运算符了。

55555555555

方式二：

以大括号 形式

55555555555

方式三：

 数组形式，每个数组项里使用 判断

  
55555555555

直接三目也可以 

   
55555555555

方式四：

用一个方法搞定 

 
55555555555

 classS1(){            let v = [];            if (this.index == this.bb) {                v.push("active");            }            if (this.index == this.cc) {                v.push("vv")            }            return v;        }

总结：

方式一：

优点： 写法简单   

缺点：写两个 以上类名时 无法写 且不利于阅读

 

方式二：

优点： 写法简单   

缺点：当多个时 也不利于阅读

 

方式三：

优点： 写法简单   

缺点：当多个时 也不利于阅读

 

方式四：

优点： 写法简单  ，利于阅读 ，而且可以添加 很多 判断

缺点：无

如果是 两个及两个以下 方式一、方式二、方式三、方式四都可以 。

如果是 两个以上 方式二、方式三、方式四 这个 我建议还是 用方式四 看起来很清爽。

在线示例：

vue 动态绑定多个类名