說說在 Vue.js 中如何繫結樣式（class 或 style）
在資料繫結中，最常見就是動態繫結元素的 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>
輸出結果：
<div class="hidden">看得見我嘛</div>
注意： :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>
輸出結果：
<div class="strong bigger">看得見我嘛</div>
當 :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
}
}
}
});
輸出結果：
<div class="display bigger-text"></div>
注意：如果樣式名稱帶有 - ，那麼必須加上單引號（示例中的 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>
輸出結果：
<div class="strong bigger">號外！號外</div>
陣列中的元素也可以使用三元表示式來計算
html：
<div id="app2"> <div :class="[isStrong?strongerClass:'']">號外！號外</div> </div>
js：
var app2 = new Vue({
el: '#app2',
data: {
isStrong:true,
strongerClass:'strong'
}
});
輸出結果：
<div class="strong">號外！號外</div>
當需要設定的 class 很多時，我們可以在陣列語法的基礎上使用物件語法，從而簡化表示式，讓程式碼變得更易維護。
html：
<div id="app3">
<div :class="[{'strong':isStrong}]">號外！號外</div>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
isStrong:true
}
});
輸出結果：
<div class="strong">號外！號外</div>
也可以在 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
}
];
}
}
});
輸出結果：
<div class="btn btn-small btn-green">號外！號外</div>
注意：上述示例使用了 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>
渲染後代碼：
<p class="content isStrong">不懂基因測序的學霸不是好的人工智慧公司 CEO</p>
ofollow,noindex">效果 ：
這種方式僅適用於把樣式應用於自定義元件的根元素。如果需要給自定義元件中的子元素設定樣式，我們可以使用元件的 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 也支援的駝峰命名法。
渲染後代碼：
<div style="border: 1px solid rgb(0, 0, 255); text-shadow: gray 0px 0px 0.3em;">馬斯克太空網計劃擴大 FCC已允許1.2萬顆衛星入軌</div>
效果 ：
