寫(xiě)在前面

其實(shí)這個(gè)方式vue.js官網(wǎng)就有，而且記錄的挺詳細(xì)的，如果想更清楚的了解請(qǐng)移步vue.js Class 與 Style 綁定
作者把官網(wǎng)的記錄在這里，是為了方便自己總結(jié)與學(xué)習(xí)。

首先說(shuō)一下綁定方式有三種,前兩中寫(xiě)那種方式都行。

第一種：
<div v-bind:class="{ active: isActive }"></div>
第二種：
<div :class="{ active: isActive }"></div>
第三種：直接綁定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

然后在具體說(shuō)說(shuō)如何綁定的，在項(xiàng)目中使用

• 一，可以給:class傳一個(gè)對(duì)象，這樣就可以動(dòng)態(tài)切換class:

<div v-bind:class="{ active: isActive }"></div>
<script>
export default {
 data() {
        return {
                  isActive: true,
         }
    }
}
</script>
上面的語(yǔ)法表示，active這個(gè)class是否起作用取決與isActive是true還是false.

• 二， 還可以給:class傳多個(gè)對(duì)象，中間以逗號(hào)隔開(kāi)，就好了

<div  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<script>
export default {
 data() {
        return {
                  isActive: true,
                  hasError: false
         }
    }
}
</script>

• 三， 還可以給把這寫(xiě)條件放到一個(gè)對(duì)象里，

<div  v-bind:class="classObject"></div>
<script>
export default {
 data() {
        return {
                  classObject: {
                    active: true,
                   'text-danger': false
                      }
         }
    }
}
</script>
這樣寫(xiě)跟上邊的效果是一樣的，只不過(guò)在標(biāo)簽里看著更簡(jiǎn)潔，也方便維護(hù)

• 四，數(shù)組語(yǔ)法，

寫(xiě)到這就想起在項(xiàng)目中經(jīng)常用到,用來(lái)展示某個(gè)值是什么顏色或者樣式

三元運(yùn)算符經(jīng)常用到

 <div class="mask" :class=" isActive ? 'on' : ' '  "></div>

            <li v-for="(item,i) in lotterylist" :key="i">
                        <div class="box">
                            <p><img :src="item.img"></p>
                            <p>{{item.title}}</p>
                        </div>
                 //這里就是動(dòng)態(tài)的綁定div的樣式
                        <div class="mask" :class="i == index ? 'on' : ''"></div>
                    </li>

下邊就說(shuō)說(shuō)還可以直接綁定內(nèi)聯(lián)樣式v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
export default {
 data() {
        return {
               activeColor:"blue",
               fontSize:"40"
         }
    }
}
</script>