iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

新手初探 Vue系列 第 8

鐵人賽Day08 - 動態加上 class

這裡來介紹在 Vue 動態加上 class
一樣先把 Vue 的架構先撰寫出來,而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class,再點擊一次時,會自動移除

<div id="app">
    <div class="box"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        isTransform: false
    }
});
</script>

不同於先前,我們這次在 data 內定義了一個 isTransform 的變數,並先給予 false 的值

<div id="app">
    <div class="box" :class="{ 'rotate' : true }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

動態加上 class 的方式,如上
v-bind 綁上 class 屬性,接著裡面用物件的形式 { '要加入的 class 名字' : 判斷式 }
我們先在裡面放置 true 就會發現 .box 已經加上 .rotate

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

如果改成我們的變數 isTransform 就會是 false 的結果,重點在於我們在點擊按鈕的時候要自動切換 truefalse
這時候在按鈕內就可以增加 click 事件:

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary" @click=" isTransform = !isTransform">選轉物件</button>
</div>

上面 isTransform = !isTransform 的意思是指,當為 true 時即改為 false,反之。


上一篇
鐵人賽Day07 - 修飾符
下一篇
鐵人賽Day09 - 表單與資料雙向綁定
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言