在資料繫結中，最常見就是動態繫結元素的 class 或內聯樣式 style 咯，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。

1 繫結 class

1.1 物件語法

使用 v-bind:class 屬性，實現動態切換 class。

html：

<div id="app">
    <div :class="{'hidden':isHidden}">看得見我嘛</div>
</div>

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isHidden:true
        }
    });
</script>
 

輸出結果：

看得見我嘛

注意： :class 是 v-bind:class 的簡寫形式。

示例中的類名 hidden 依賴於資料 isHidden ，當 isHidden 為 true 時， div 就會擁有類名 hidden，為 false 時就沒有該類名 。

我們也可以一次傳入多個屬性，而且 :class 可以和常規的 class 同時使用。

html：

<div id="app">
    <div class="strong" :class="{'hidden':isHidden,'bigger':isBigger}">看得見我嘛</div>
</div>
 

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isHidden: false,
            isBigger: true
        }
    });
</script>

輸出結果：

看得見我嘛

當 :class 中的某個屬性值為 true 時，就會載入對應的類名。

當 :class 的表示式過長或邏輯複雜時，我們可以通過計算屬性來繫結。

html：

<div id="app2">
    <div :class="customClasses"></div>
</div>
 

js：

var app2 = new Vue({
	el: '#app2',
	data: {
		isHidden: false,
		isBigger: true
	},
	computed: {
		customClasses: function () {
			return {
				display: !this.isHidden,
				'bigger-text': !this.isHidden && this.isBigger
			}
		}
	}
});

輸出結果：

**注意：**如果樣式名稱帶有 -，那麼必須加上單引號（示例中的 bigger-text）才能被正確識別。

1.2 陣列語法

也可以使用陣列語法，給 :class 繫結一個 class 陣列。

html：

<div id="app">
    <div :class="[strongerClass,biggerClass]">號外！號外</div>
</div>

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            strongerClass:'strong',
            biggerClass:'bigger'
        }
    });
</script>

輸出結果：

號外！號外

陣列中的元素也可以使用三元表示式來計算

html：

<div id="app2">
    <div :class="[isStrong?strongerClass:'']">號外！號外</div>
</div>

js：

var app2 = new Vue({
	el: '#app2',
	data: {
		isStrong:true,
		strongerClass:'strong'
	}
});

輸出結果：

號外！號外

當需要設定的 class 很多時，我們可以在陣列語法的基礎上使用物件語法，從而簡化表示式，讓程式碼變得更易維護。

html：

<div id="app3">
    <div :class="[{'strong':isStrong}]">號外！號外</div>
</div>

js：

var app3 = new Vue({
	el: '#app3',
	data: {
		isStrong:true
	}
});

輸出結果：

號外！號外

也可以在 computed 或 methods 中返回需要設定的陣列。

html：

<div id="app4">
    <div :class="btnClass">號外！號外</div>
</div>

js：

var app4 = new Vue({
	el: '#app4',
	data: {
		size: 'small',
		isGreen: true
	},
	computed: {
		btnClass: function () {
			return [
				'btn',
				{
					['btn-' + this.size]: this.size !== '',
					['btn-green']: this.isGreen
				}
			];
		}
	}
});

輸出結果：

號外！號外

注意： 上述示例使用了 ECMAScript 6 語法，所以在 webStorm 中需要進行設定（Setting → JavaScript → 選擇 ECMAScript 6 ）否則會出現紅色波浪線哦：

在業務中會經常會利用計算屬性為元素動態設定類名，尤其是在編寫可複用的元件時。所以在開發過程中，如果表示式較長或者邏輯較為複雜，建議優先使用計算屬性哦O(∩_∩)O~

1.3 應用於元件

如果直接在自定義元件中使用 class 或 :class，那麼樣式規則就會直接應在這個元件的根元素上。

html：

<div id="app">
    <text-component :class="{'isStrong':isStrong}"></text-component>
</div>

js：

<script>
    Vue.component('text-component', {
        template: '<p class="content">不懂基因測序的學霸不是好的人工智慧公司 CEO</p>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            isStrong: true
        }
    });
</script>

css：

<style type="text/css">
	.isStrong{font-weight: bold}
</style>

渲染後代碼：

不懂基因測序的學霸不是好的人工智慧公司 CEO

效果：

這種方式僅適用於把樣式應用於自定義元件的根元素。如果需要給自定義元件中的子元素設定樣式，我們可以使用元件的 props 來實現。

2 繫結內聯樣式

也可以使用 v-bind:style 或 :style 直接給 HTML 元素繫結樣式，它也有對應的物件語法與陣列語法。

html：

<div id="app">
    <div :style="border">馬斯克太空網計劃擴大 FCC已允許1.2萬顆衛星入軌</div>
</div>

js：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            border:{
                border:'1px solid #00F',
                textShadow:'0 0 .3em gray'
            }
        }
    });
</script>

因為 JS 屬性不支援短橫分隔命名，所以我們這裡使用 CSS 也支援的駝峰命名法。

渲染後代碼：

馬斯克太空網計劃擴大 FCC已允許1.2萬顆衛星入軌

效果：