1.v-bind动态绑定class
1.1 v-bind动态绑定class(对象用法)
.active{
color: red;
}
<div id="app">
<!-- <h2 :class="{active:isactive}">改变class</h2> -->
<h2 :class="getactive()">改变class</h2>
<button type="button" @click="changeActive">切换颜色</button>
</div>
new Vue({
el:'#app',
data(){
return{
isactive:true
// isactive:false
}
},
methods:{
getactive(){
return {
active:this.isactive
}
},
changeActive(){
this.isactive=!this.isactive
}
}
})
1.2 v-bind动态绑定class(数组用法)
<div id="app">
<h2 class="title" :class="['active','line']">{
{message}}</h2>