VUE基礎：Class/Style綁定
在很多業務畫面，某些元素的樣式是動態變化的。Vue中的Class/Style綁定就是爲了實現動態樣式效果的技術手段。Vue針對v-bind 用於 class 和 style 時做了針對的增強處理，表達式結果的類型除了普通的字符串之外，同時還可以支持對象以及數組類型。
6.1 Class綁定
6.1.1 簡單綁定
最簡單的綁定：此處active不加單引號也可以同樣能夠渲染。下面語句的意思是 active 這個樣式是否存在取決於數據屬性 isActive 的真假。
<div id="app">
<p v-bind:class="{'active': isActive}">Class簡單綁定</p>
</div>
渲染結果爲：
<p class="active">Class簡單綁定</p>
active是定義在HTML文件中Style裏面定義的樣式：
<head>
<style>
.active {
color:darkblue;
}
</style>
</head>
isActive是定義在HTML文件中Script部分定義的vm中的數據：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true
}
})
</script>
6.1.2 綁定多個class
若要綁定多個class，需要逗號隔開就行。
<div id="app">
<p v-bind:class="{'active': isActive}">Class簡單綁定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class複數綁定</p>
</div>
渲染結果爲：
<p class="active activeTwo">Class複數綁定</p>
activeTwo是新增加的設定字體大小的屬性。
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
</style>
isActiveTwo：新增加的控制第二個Class的變量。
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true
}
})
</script>
6.1.3 v-bind:class與普通Class結合
此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板：
<div id="app">
<p v-bind:class="{'active': isActive}">Class簡單綁定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class複數綁定</p>
<hr>
<p class="normalClass" v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class普通和綁定共存</p>
</div>
增加一個新的class
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
.normalClass {
background-color:deeppink;
}
</style>
渲染結果：
<p class="normalClass active activeTwo">Class普通和綁定共存</p>
6.1.4 v-bind綁定計算屬性
在這裏可以同時支持一個強大模式，綁定一個返回對象的計算屬性。
<p v-bind:class="computeClass">使用計算屬性綁定對象</p>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true
},
computed: {
computeClass(){
return {
active : this.isActive,
activeTwo : this.isActiveTwo,
normalClass: true
}
}
},
})
</script>
渲染結果如下：
<p class="active activeTwo normalClass">使用計算屬性綁定對象</p>
6.1.5 v-bind數組
我們也可以把一個數組對象傳給 v-bind:class，用來設定class列表：
<p v-bind:class="['active', 'activeTwo']">屬性綁定爲數組</p>
渲染結果：
<p class="active activeTwo">屬性綁定爲數組</p>
另外，還可以根據條件切換數組中的樣式，可以用三元運算符。
<p v-bind:class="[isActive ? 'active' : '', isActiveTwo ? 'activeTwo' : '']">屬性綁定爲數組(使用三元運算符動態切換)</p>
渲染結果：
<p class="active activeTwo">屬性綁定爲數組(使用三元運算符動態切換)</p>
6.2 Style綁定
6.2.1 v-bind:style對象語法
v-bind:style 的對象語法非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
<p v-bind:style="{color: colorSet, fontSize}">Style對象綁定(style="{color: colorSet, fontSize}")</p>
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px'
},
渲染結果：
<p style="color: red; font-size: 30px;">Style對象綁定(style="{color: colorSet, fontSize}")</p>
也可以直接綁定一個對象，看起來更容易讓人理解。
<p v-bind:style="defaultStyle">Style對象綁定</p>
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px',
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
渲染結果：
<p style="color: red; font-size: 30px;">Style對象綁定</p>
6.2.2 v-bind:style數組綁定
v-bind:style 的數組語法可以將多個樣式對象綁定到同一個元素上。
<p v-bind:style="[colorArr, fontArr]">Style數組綁定效果</p>
data : {
colorArr: {
color: 'red'
},
fontArr: {
fontSize: '30px'
},
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
渲染結果：
<p style="color: red; font-size: 30px;">Style數組綁定效果</p>
6.3 完整代碼
classbindvue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE Class&Style綁定</title>
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
.normalClass {
background-color:deeppink;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{'active': isActive}">Class簡單綁定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class複數綁定</p>
<hr>
<p class="normalClass" v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class普通和綁定共存</p>
<hr>
<p v-bind:class="computeClass">使用計算屬性綁定對象</p>
<hr style= "border:5px dashed blue" />
<p v-bind:class="['active', 'activeTwo']">屬性綁定爲數組</p>
<hr style="border:blueviolet 2px dashed">
<p v-bind:class="[isActive ? 'active' : '', isActiveTwo ? 'activeTwo' : '']">屬性綁定爲數組(使用三元運算符動態切換)</p>
<hr>
<hr>
<p v-bind:style="{color: colorSet, fontSize}">Style對象綁定(style="{color: colorSet, fontSize}")</p>
<hr>
<p v-bind:style="defaultStyle">Style對象綁定</p>
<hr>
<p v-bind:style="[colorArr, fontArr]">Style數組綁定效果</p>
<hr>
<p v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">Style多屬性兼容</p>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px',
colorArr: {
color: 'red'
},
fontArr: {
fontSize: '30px'
},
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
computed: {
computeClass(){
return {
active : this.isActive,
activeTwo : this.isActiveTwo,
normalClass: true
}
}
},
})
</script>
</html>
顯示結果：
