vue怎么動態綁定多個類名

本文小編為大家詳細介紹“vue怎么動態綁定多個類名”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue怎么動態綁定多個類名”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

問題描述：

今天遇到一個問題，就是 一個元素要動態綁定 兩個或多個類名。

固定綁定多個類名方法：

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

方式一：

 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怎么動態綁定多個類名”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。