vue 动态绑定多个类名（:class动态绑定多个类名）

问题描述：

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

固定绑定多个类名方法：

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

方式一：

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

项目中用到了方法四
eg：需要实现图中效果

  <div class="feed-content feedWidth">
              <div
                class="feed"
                :class="classS1(item)"
                v-for="(item, index) in feedList"
                :key="index"
              >
                {{ item }}
              </div>
            </div>

data中定义

  data() {
    return {
      feedList: [ "1", "2", "3","1","2", "3", "1","2", "3", "1", "2","3","1","2", "3",
      "1","2","3",],
    };
  },

methods 方法

  methods: {
    classS1(val) {
      let v = [];
      if (val == 1) {
        v.push("feedGreen");
      } else if (val == 2) {
        v.push("feedYellow");
      } else {
        v.push("feedGray");
      }
      return v;
    },
  },

style样式

.feed-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.feedWidth {
  width: 50%;
}
.feed {
  width: 30px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  margin: 2px;
}
.feedGreen {
  background: #409e2a;
}
.feedYellow {
  background: #fde704;
}
.feedGray {
  background: #747474;
}