[Day12] 動態切換 ClassName

第 12 屆 iThome 鐵人賽

DAY 12

Modern Web

少年學Vue，如隙中窺月系列第 12 篇

12th鐵人賽

Leo

2020-09-26 21:12:37

820 瀏覽

分享至

物件方式

先前提到我們可以使用 v-bind 來動態綁定會變化的元素屬性，比如用 :class = "{'套用類別名稱':判斷值}"，以物件方式加入類別樣式，在這裡我們有另一種寫法，就是直接將 class 裡面所存放的物件，直接存放在 Vue 資料中，像是下面範例的 classObject，這樣的好處是可直接透過物件的方式來修改類別樣式的判斷式，而不用在另外用資料來存判斷式的值，像是 isColorRed 或 isTextBold 就可以省掉。我們用 v-on 在 button 加上 click 事件，觸發之後可以變更判斷式的值，用！否定語法，將 true 變成 false ，或 false 變成 true 來套用樣式，要注意第二種寫法，如果我們要存取物件時，如果遇到物件內的存取名稱是用-符號連接，我們要改成用['存取名稱']才不會顯示錯誤，像是 text-bold。

<body>
    <div id=app>
        <p :class="{'color':isColorRed,'text-bold':isTextBold}">物件寫法1</p>
        <button @click="isColorRed=!isColorRed">變紅</button>
        <button @click="isTextBold=!isTextBold">變粗</button>
        <p :class="classObject">物件寫法2</p>
        <button @click="classObject.color=!classObject.color">變紅</button>
        <button @click="classObject['text-bold']=!classObject['text-bold']">變粗</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            isColorRed:true,
            isTextBold:true,
            classObject:{
                'color':true,
                'text-bold':true
            }
        }
    })
</script>

	.color{
        color:red;
    }
    .text-bold{
        font-weight: bold;
    }

陣列方式

使用物件加入類別的方式，我們已經知道類別的數量一個一個去設定類別的值，如果我們今天不能判斷有多少類別樣式要套用，就得採用陣列的方式 : class = ['類別名稱','類別名稱'] 來加入類別樣式，加上前面提到，我們可以用 v-model 將一個陣列資料和 checkbox 輸入綁定，當我們點擊 checkbox 點擊欄位，所設定的 value 就會加入陣列資料中，而我們將類別樣式設定成value，當點擊後 classArray 陣列就會加入此值並且套用此類別樣式。

<body>
    <div id=app>
        <p :class="['color','text-bold']">陣列寫法1</p>
        <p :class="classArray">陣列寫法2</p>
        <input type="checkbox" value="color" v-model="classArray"></input>
        <input type="checkbox" value="text-bold" v-model="classArray"></input>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            classArray:[]
        }
    })
</script>

	.color{
        color:red;
    }
    .text-bold{
        font-weight: bold;
    }

行內樣式

我們也可以直接插入 style 樣式屬性，而不使用類別樣式，插入樣式屬性的方式 :style = { 樣式屬性："樣式的值"}，然後也可以分為物件還有陣列的方式。最後提醒如果我們要使用到的屬性或變數，比如 font-weight 中間有 dash - 符號的名稱，我們如果直接使用它會出錯，必須使用 ' ' 將名稱包起來，或者是將它改寫成 camelCased (駝峰) 命名，將 dash 刪除並且將 dash 後面變大寫，比如像是 fontＷeight。

<body>
    <div id=app>
        <h2>行內樣式</h2>
        <p style="font-weight:bold;color:red;">一般插入行內樣式方法</p>
        <p :style="{fontWeight:'bold',color:'red'}">物件插入行內樣式方法 1</p>
        <p :style="classObjects">物件插入行內樣式方法 2</p>
        <p :style="[{fontWeight:'bold'},{color:'red'}]">陣列插入行內樣式方法 1</p>
        <p :style="[color,font]">陣列插入行內樣式方法 2</p>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            classObjects:{
                fontWeight:'bold',
                color:'red'
            },
            font:{
                fontWeight:'bold'
								//改成 'font-weight':'bold'也可以
            },
            color:{
                color:'red'
            }
        }
    })
</script>