v-bind动态绑定属性、v-for和v-bind结合

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>