Class and Style Bindings

Binding HTML Classes

前面有介紹「賦值attribute」可以用v-bind:attr的語法這樣寫，寫一個vue.data在裡面。

< div v-bind:class="isActive">{{text}}< /div >

var vbind_assign = new Vue({
    data: {
        text: 'active!!!',
        isActive: 'active'
    }
})

同理class也可以，而class最常用的就是「換class」。
可以用v-bind:class的語法，在後面接一個「在vue.data裡面宣告一個js的物件」名稱。

< div  v-bind:class = "{ active: isActive }" > 

var vbind_condition = new Vue({
    data: {
        text: 'vbind-condition!!!',
        isActive: true
    }
})

意思是
if (vbind_condition.data.isActive === true)

< div class="active">
    vbind-condition!!!
    ::after
< /div >

else

< div class="">
    vbind-condition!!!
< /div >

如果要「條件控制」很多個class的套用情形，可以使用下面的方法

Object (of javascript) Syntax

如果v-bind:class後面接著的物件很複雜，就可以將這一個js物件，命名並寫在data裡，並且在v-bind:class接上這個js物件的名字

< div v-bind:class="classGroup">qwer< /div >

在data直接建「資料物件」(dataObject)，用來切換red

data: {
    classGroup: {
        'red-text': true,
        'bold-text': false,
        active: false
    }
}

< div class="red-text active">qwer< /div >

Array (of javascript) Syntax

除了寫物件在v-bind:class後面，還可以寫array，代表data有其屬性時，就有class

< div v-bind:class="[arrayElement]">< /div >

data: {
  arrayElement: 'cssClass'
}

HTML渲染後，變成這樣

< div class="cssClass">< /div >

Array加判斷式

如果不只是要依「Modal是否有屬性」判斷

想要依「其屬性的內容」判斷，就在array裡用「三元運算」property?cssClass1:cssClass2

< div v-bind:class="[arrayElement ? cssClass1 : cssClass2]">< /div >

如果太複雜，可以再將array裡的成員變成物件

< div v-bind:class="[{ active: isActive }, errorClass]">< /div >

With Components

Vue.component('my-component', {
  template: '< p class="foo bar">Hi< /p >'
})

var empty_component = new Vue ({
    el: '#empty-component'
})

< my-component id="empty-component" class="baz boo">< /my-component >

渲染完的結果是這樣，兩邊的class取聯集

< p id="empty-component" class="foo bar baz boo">Hi< /p >

component條件渲染class

其中，它的class也可以依照上述方式處理

< my-component v-bind:class="{ active: isActive }">< /my-component >

< p class="foo bar active">Hi< /p >

Binding Inline Styles

這是一種像極CSS原生寫法的「控制vue css」的寫法

v-bind的用法，用在style上。

< div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">< /div >

data: {
  activeColor: 'red',
  fontSize: 30
}

像不像css的inline寫法

< div style="color: red;fontSize: 30px;">< /div >

很像直接寫CSS的感覺吧!!!(官網直接這麼說「it looks almost like CSS」)。
另外還可以將這種寫法變成「資料物件」的寫法

< div v-bind:style="styleObject">< /div >

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

像不像css的一般寫法

< div class="title-style">< /div >

.title-style {
    color: 'red';
    fontSize: '13px';
}

< div v-bind:style="[obj1, obj2]">< /div >

自動補上 vendor prefix

而且!!!在需要時會「自動加上 Vendor Prefix」

自動選擇支援的前綴

< div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">

< div style="{ display: flex }">