樣式部分：
<style>
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
邏輯部分：
<div id="app">
<div v-bind:class="{active: isActive,error: isError}">
測試樣式
</div>
<button v-on:click='handle'>切換</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function(){
// 控制isActive的值在true和false之間進行切換
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
</script>
核心思路：通過v-bind:class綁定active和error兩個樣式的類名票唆，通過true和false控制樣式的顯示和隱藏睁搭，this.isActive = !this.isActive的意思是直接取反毁兆。
同理意蛀，數(shù)組的綁定方式如下傍妒，樣式代碼相同留瞳，邏輯代碼如下：
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>測試樣式</div>
<button v-on:click='handle'>切換</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function(){
this.activeClass = '';
this.errorClass = '';
}
}
});
</script>
核心思路：數(shù)組使用v-bind:class綁定數(shù)組，在方法中控制樣式是直接控制activeClass的數(shù)值件舵。對象方法和數(shù)組方法可以結合起來使用卸察。
