【Vue】切換Class/行內Style寫法

1.在html中藉由true/false的切換，套用class

​

<div id="app">
        <div class="box" :class="{'dg-color標籤':bkcolortrue/false,'rotate':istransform}">
        </div>
        <input type="checkbox" @click="bkcolor=!bkcolor" 轉換true/false>顏色
        <br/>
        <button @click="istransform=!istransform" 轉換true/false>旋轉</button>
    </div>

  <script>
        var app = new Vue({
            el: "#app",
            data: {
                istransform: false,
                bkcolor: false
            }
        })
    </script>

 <style>
        .box {
            width: 50px;
            height: 50px;
            transition: all 0.5s;
        }

        .dg-color {
            background-color: red;
        }

        .box.rotate {
            transform: rotate(45deg)
        }
    </style>

​

2.在html套用物件，然後把class寫在vue裡面

​

<div class="box" :class="objectClass"></div>
<input type="checkbox" v-model="objectClass['dg-color']">顏色 兩種寫法都可以
<input type="checkbox" @click="objectClass['dg-color']=!objectClass['dg-color']">顏色<br/>
<button @click="objectClass.rotate=!objectClass.rotate">旋轉</button>

        var app = new Vue({
            el: "#app",
            data: {

                objectClass: {
                    "dg-color": false,
                    "rotate": false
                },
            }
        })套用陣列，來切換CLASS（適用於class數量不一定的時候）

3.在html中放置陣列，然後動態增加class

用v-model連接數據，然後用value增加class

<div class="box" :class="classArray"></div>
<input type="checkbox" v-model="classArray" value="dg-color">顏色
<input type="checkbox" v-model="classArray" value="rotate">旋轉

    var app = new Vue({
            el: "#app",
            data: {
                classArray: []
            }
        })

​

4.在html撰寫style

style寫在vue中

用陣列寫style

 <div id="app">
        <div class="box" :style="bkcolor1">
        </div>
        <div class="box" :style="{backgroundColor:bkcolor2.backgroundColor}">
        </div>
        <div class="box" :style="[bkcolor2,styleObject3]">
        </div>
    </div>

 var app = new Vue({
            el: "#app",
            data: {
                bkcolor1: {
                    backgroundColor: "red"
                },
                bkcolor2: {
                    backgroundColor: "red"
                },
                styleObject3: {
                    boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
                },
            }
        })

​