在數(shù)據(jù)綁定中，最常見就是動態(tài)綁定元素的 class 或內(nèi)聯(lián)樣式 style 咯如暖，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。
1 綁定 class
1.1 對象語法
使用 v-bind:class 屬性浩村，實(shí)現(xiàn)動態(tài)切換 class。
html：
<div id="app">
<div :class="{'hidden':isHidden}">看得見我嘛</div>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
isHidden:true
}
});
</script>
輸出結(jié)果：
<div class="hidden">看得見我嘛</div>
注意： :class 是 v-bind:class 的簡寫形式占哟。
示例中的類名 hidden 依賴于數(shù)據(jù) isHidden 心墅，當(dāng) isHidden 為 true 時酿矢， div 就會擁有類名 hidden，為 false 時就沒有該類名 怎燥。
我們也可以一次傳入多個屬性瘫筐，而且 :class 可以和常規(guī)的 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>
輸出結(jié)果：
<div class="strong bigger">看得見我嘛</div>
當(dāng) :class 中的某個屬性值為 true 時铐姚，就會加載對應(yīng)的類名策肝。
當(dāng) :class 的表達(dá)式過長或邏輯復(fù)雜時，我們可以通過計(jì)算屬性來綁定隐绵。
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
}
}
}
});
輸出結(jié)果：
<div class="display bigger-text"></div>
注意：如果樣式名稱帶有 -之众，那么必須加上單引號（示例中的 bigger-text）才能被正確識別。
1.2 數(shù)組語法
也可以使用數(shù)組語法依许，給 :class 綁定一個 class 數(shù)組棺禾。
html：
<div id="app">
<div :class="[strongerClass,biggerClass]">號外！號外</div>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
strongerClass:'strong',
biggerClass:'bigger'
}
});
</script>
輸出結(jié)果：
<div class="strong bigger">號外悍手！號外</div>
數(shù)組中的元素也可以使用三元表達(dá)式來計(jì)算
html：
<div id="app2">
<div :class="[isStrong?strongerClass:'']">號外帘睦！號外</div>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
isStrong:true,
strongerClass:'strong'
}
});
輸出結(jié)果：
<div class="strong">號外！號外</div>
當(dāng)需要設(shè)置的 class 很多時坦康，我們可以在數(shù)組語法的基礎(chǔ)上使用對象語法竣付，從而簡化表達(dá)式，讓代碼變得更易維護(hù)滞欠。
html：
<div id="app3">
<div :class="[{'strong':isStrong}]">號外古胆！號外</div>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
isStrong:true
}
});
輸出結(jié)果：
<div class="strong">號外！號外</div>
也可以在 computed 或 methods 中返回需要設(shè)定的數(shù)組筛璧。
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
}
];
}
}
});
輸出結(jié)果：
<div class="btn btn-small btn-green">號外！號外</div>
注意： 上述示例使用了 ECMAScript 6 語法夭谤，所以在 webStorm 中需要進(jìn)行設(shè)置（Setting → JavaScript → 選擇 ECMAScript 6 ）否則會出現(xiàn)紅色波浪線哦：
在業(yè)務(wù)中會經(jīng)常會利用計(jì)算屬性為元素動態(tài)設(shè)置類名棺牧，尤其是在編寫可復(fù)用的組件時。所以在開發(fā)過程中朗儒，如果表達(dá)式較長或者邏輯較為復(fù)雜颊乘，建議優(yōu)先使用計(jì)算屬性哦O(∩_∩)O~
1.3 應(yīng)用于組件
如果直接在自定義組件中使用 class 或 :class，那么樣式規(guī)則就會直接應(yīng)在這個組件的根元素上醉锄。
html：
<div id="app">
<text-component :class="{'isStrong':isStrong}"></text-component>
</div>
js：
<script>
Vue.component('text-component', {
template: '<p class="content">不懂基因測序的學(xué)霸不是好的人工智能公司 CEO</p>'
});
var app = new Vue({
el: '#app',
data: {
isStrong: true
}
});
</script>
css：
<style type="text/css">
.isStrong{font-weight: bold}
</style>
渲染后代碼：
<p class="content isStrong">不懂基因測序的學(xué)霸不是好的人工智能公司 CEO</p>
效果：
這種方式僅適用于把樣式應(yīng)用于自定義組件的根元素乏悄。如果需要給自定義組件中的子元素設(shè)置樣式，我們可以使用組件的 props 來實(shí)現(xiàn)恳不。
2 綁定內(nèi)聯(lián)樣式
也可以使用 v-bind:style 或 :style 直接給 HTML 元素綁定樣式檩小，它也有對應(yīng)的對象語法與數(shù)組語法。
html：
<div id="app">
<div :style="border">馬斯克太空網(wǎng)計(jì)劃擴(kuò)大 FCC已允許1.2萬顆衛(wèi)星入軌</div>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
border:{
border:'1px solid #00F',
textShadow:'0 0 .3em gray'
}
}
});
</script>
因?yàn)?JS 屬性不支持短橫分隔命名烟勋，所以我們這里使用 CSS 也支持的駝峰命名法规求。
渲染后代碼：
<div style="border: 1px solid rgb(0, 0, 255); text-shadow: gray 0px 0px 0.3em;">馬斯克太空網(wǎng)計(jì)劃擴(kuò)大 FCC已允許1.2萬顆衛(wèi)星入軌</div>
效果：
