一、繫結class

       1.繫結一個class屬性值

       方法一如下：  

<div :class="actived" id="app">hello world</div>

       使用的話，把actived定義成任何一個變數，然後定義的這個變數就會繫結到這個div class屬性上

var app = new Vue({
    el:'#app',
    data:{
        actived: active
    }
})

       現在id屬性為app的div上綁定了active的屬性，接下來只需要定義active的樣式就行了

.active{
    color: red
}

       現在div的顏色就會變成紅色了

       方法二如下:使用[]的形式

<div id="app" :class="[actived]">hello world</div>

       然後js程式碼和css程式碼和上面一摸一樣，可以看到同樣的效果

      方法三：使用{}形式

<div id="app" :class="{active:isTrue}">hello world</div>

    上面html程式碼的意思是，繫結一個class屬性值為active的前提是isTrue這個布林型別值為true，那麼如果想要使用active屬性值，      只需要將isTrue置為true即可，看js程式碼

var app = new Vue({
    el:"#app",
    data:{
       isTrue:true   
    }
})

   那麼我們在data裡定義了isTrue為true，那麼div綁定了值為active的屬性值，那麼就可以寫css程式碼了

.active{
    color: red,
    font-size: 40px
}

    2.繫結兩個class屬性

   方法一：還是使用[]形式，只不過這次要[]裡寫兩個變數，邏輯和繫結一個class屬性一致，我就寫html程式碼，這裡我就不寫js和         css程式碼了

<div id="app" :class="[active_1,active_2]">hello world</div>
 

 方法二：使用{}形式，繫結兩個class屬性值，我這裡還是隻寫html程式碼，js程式碼和css程式碼可以參考繫結一個class屬性同樣也是用{}的形式的方法

<div id="app" :class="{active_1:isTrue,active_2:pass}">hello world</div>

我還是說明一下，要繫結active_1和active_2這兩個class屬性值，把這兩個變數對應的布林型別值設定為true就可以了。

另外，我們的專案中業務邏輯肯定沒有我寫的這麼簡單，比如我們需要繫結方法，去改變class屬性，但是我們掌握了這些基本的，剩下的就只是js的邏輯處理了，希望可以幫到你。