iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 8

(第八天)自我學習 - 綁定標籤上的 Class

標籤上面的 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 做一個控制了呢!試試看吧


上一篇
(第七天)自我學習 - 監督者 Watch
下一篇
(第九天)自我學習 - 標籤上指定一個 Class 做綁定
系列文
使用Vue製作簡單的 WorkBoard (30天)24

尚未有邦友留言

立即登入留言