快捷導(dǎo)航

vue動(dòng)態(tài)綁定多個(gè)類名方法詳解(:class動(dòng)態(tài)綁定多個(gè)類名)

更新時(shí)間：2022年11月12日 10:48:05 作者：崽崽的谷雨

vue中可以通過:class=""這樣來根據(jù)一定的條件來動(dòng)態(tài)添加class,但是有時(shí)候需要判斷的條件比較多,需要?jiǎng)討B(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定多個(gè)類名(:class動(dòng)態(tài)綁定多個(gè)類名)的相關(guān)資料,需要的朋友可以參考下

問題描述：

今天遇到一個(gè)問題，就是一個(gè)元素要?jiǎng)討B(tài)綁定兩個(gè)或多個(gè)類名。

固定綁定多個(gè)類名方法：

綁定多個(gè)寫死的類名很簡單方法有如下幾種：

方式一：

class 中間有空格

<div class="active vv">5555555</div>

方式二：

數(shù)組形式使用 :class 當(dāng)然直接在data里聲明一個(gè) 變量也可以。

<div :class="['active','vv']">5555555</div>

方式三：

借用一個(gè)方法處理

<div :class="classS()">5555555</div>

methods里定義一個(gè)方法返回字符串和數(shù)組都行

 methods:{
         classS(){
           return ['vv','active'];
           // return "vv active";
         }
      }

動(dòng)態(tài)綁定多個(gè)類名方法：

其實(shí)動(dòng)態(tài)綁定和固定差不多，方式是一樣的，無非就是需要根據(jù)變量來判斷。

以下方式 data 和樣式代碼如下

 data() {
        return {
           bb:1,
           index:1,
           cc:1
        }
     },

.active{
  color:red;
}
.vv{
  font-size:30px;
}

方式一：

三目運(yùn)算符，且以數(shù)組形式。不推薦使用這種方法，如果只有兩個(gè)類名可以使用，多了的話就不好寫三目運(yùn)算符了。

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

方式三：

數(shù)組形式，每個(gè)數(shù)組項(xiàng)里使用判斷

  <div  
:class="[{active:bb==index},{vv:cc==index}]">55555555555</div>

直接三目也可以

   <div :class="[bb==index?'active':'',cc==index?'vv':'']">55555555555</div>

方式四：

用一個(gè)方法搞定

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