v-bind的作用：動態地綁定一個或多個 attribute，或一個組件 prop 到表達式，v-bind可以簡寫爲 :
v-bind可以動態綁定class，可以綁定對象或者爲數組
綁定對象時：
- v-bind可以綁定一組鍵-值，也可以綁定多組鍵-值；
- v-bind動態綁定class時，不會影響標籤原有的class；
- v-bind也可以綁定方法，方法的內容爲對象；
- 綁定class的形式：v-bind="{鍵(string):值(boolean)}"
綁定數組時：
- v-bind綁定方法的內容爲數組；
- 綁定class的形式：v-bind="[數組名稱]"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue計數器</title>
<style>
.active {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{active: isActive}">測試文本</p>
<p :class="[test1, test2, 'active']">測試文本2</p>
<button @click="btnChange">點擊切換顏色</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '文本內容',
isActive: true,
test1: 'classP1',
test2: 'classP2'
},
methods: {
btnChange: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
