[Vue] Class與Style綁定

Class動態綁定(v-bind:class-name)

• 動態class可和一般class共存
• 可綁定一個或多個class
• vue component 也可套用

index.html

        <div v-bind:class="{'name-block':true}">

            內容文字

<button @click="changeColor">Change background color</button>

        </div>

index.css

.name-block {

  background-color: antiquewhite;

  margin: 8px;

  padding: 8px;

}

.dark-theme {

  background-color: brown;

  color: white;

}

index.js

var app = new Vue({

    el: '#app',

    data: {

isDark: false

},

methods: {

changeColor: function () {

            this.isDark = !this.isDark

        }

}

)

Class動態綁定 - 2

• 可將整個class object放在javascript中

index.html

        <div class="block age-block" :class="classObject">

            你幾歲?

            <div>Reply: {{reply}}</div>

            <input type="text" v-model="age">

        </div>

index.css

.block {

  margin: 8px;

  padding: 8px;

}

.age-block {

  background-color: bisque;

}

index.js

var app = new Vue({

computed: {

        classObject: function () {

            return { 'dark-theme': this.isDark }

        }

    }

})

Inner Style動態綁定(v-bind:style-name)

• 若有需要的話，vue會自動補上瀏覽器引擎前綴詞, e.g. transform

index.html

        <div class="block hello-world-block" :style="{fontSize: fontSize + 'px'}">

            <input type="text" v-model="title">

            <div>{{title}}</div>

            <div>Reverse Title: {{reverseTitle}}</div>

        </div>

index.css

.hello-world-block {

  background-color: burlywood;

}

index.js

var app = new Vue({

    el: '#app',

    data: {

     fontSize: 30

}

})

source code