標籤上面的 Class 如何來控制呢？

這一次我們會使用的是 v-bind:class 這個屬性，為什麼需要這個呢？像是在使用樣式的轉換的時候很好用直接可以判斷，是否為這個屬性。

//先來製作一個變數，為布林值的屬性
data:{
    isActive: true,
},
//再來是製作觸發事件的方法
methods: {
    btnClick: function(){
        this.isActive = false;
    },
},

//當然我們要先準備 CSS 中的顏色
<style>
.active{
    color:red;
}
</style>

這樣之後呢在 id = "myApp"裡面加入標籤

<div v-bind:class="{active:isActive}">顏色是紅色的</div>
<button @click="btnClick">變紅色/button>

這樣是不是就可以把 class 做一個控制了呢！試試看吧