前面涉及到的動態更新html元素屬性：

<a :href="url">link</a>
<img :src="imgUrl">

綁定class的幾種方式：

1、對象語法

<div :class="{‘active‘:isActive}"></div>
<div class="static" :class="{‘active‘:isActive,‘error‘:isError}"></div>

<div :class="classes"></div>
data:{isActive:true},
 
computed:{
　　classes:function(){
　　　　return {
　　　　　　active:isActive,
　　　　　　error:false
　　　　}
　　}
}
//除計算屬性外，還可以直接綁定一個object數據，或methods

2、數組語法

//多個class
<div :class="[activeCls,errorCls]"></div>
data:{
    activeCls:‘active‘,
    errorCls: ‘error‘
}

//條件，三元表達式
<div :class="[isActive?activeCls:‘‘, errorCls]"
 
></div>

//多個條件
<div :class="[{‘active‘:isActive}, errorCls]"></div>
data:{
    isActive: true,
    errorCls: ‘error‘
}

//計算屬性
<button :class="classes"></button>
data:{
   size: ‘large‘,
   disabled: true
},  
computed:{
    classes: function(){
        return [
            ‘btn‘,
            {
                [‘btn-‘ + this.size]: this.size !==‘‘,
                [‘btn-disable‘]:this.disabled
            }
        ];
    }
}
 

使用計算屬性給元素動態設置類名，在業務中經常會用到。

3、在組件上使用

聲明一個簡單的組件

Vue.component(‘my-compoenent‘,{
    template: ‘<p class="article">text</p>‘
});

<my-component :class="{‘active‘: isActive}"></my-component>
data: {
    isActive:true
}

這種方法僅適用於自定義組件的最外層是一個根元素，否則無效。如果要給具體的子元素設置類名，應當使用組件的props來傳遞。

4、綁定內聯樣式

<div :style="{‘color‘: color, ‘fontSize‘:fontSize + ‘px‘}">text</div>
data: {
    color: ‘red‘,
    fontSize: 14
}

css屬性名稱使用駝峰或短橫分割命名。

許多情況，寫在data或computed中

<div :style="styles">text</div>
data: {
    color: ‘red‘,
    fontSize:14+‘px‘
}

<div :style="[styleA,styleB]">text</div>

vue.js實戰 第一篇 第四章 v-bind及class與style綁定