v-band绑定不同class，不同style

v-band绑定class

对象语法（用的较多）

一：动态class（对象语法）

 // 通过boolean值来控制显示那个类
 
<div :class="{'类名1':boolean,'类名2':boolean}"></div>

二：普通固定的class和动态class（对象语法）

// '类名0' 是固定的class,如果动态class中都为true,这时就会与3个class

<div class='类名0' :class="{'类名1':boolean,'类名2':boolean}"></div>

三：如果过于复杂，可以放在一个methods或者computed中（对象语法）
1：利用methods

// '类名0' 是固定的class

<div class='类名0' :class="getClasses()"></div>

// js代码,利用methods
methods:{
	getClasses:function(){
		return {'类名1':boolean,'类名2':boolean}
	}
}

2：利用computed

// '类名0' 是固定的class

<div class='类名0' :class="classes"></div>

// js代码,利用computed,classes是一个计算属性
computed:{
	classes:function(){
		return {'类名1':boolean,'类名2':boolean}
	}
}

数组语法（用的较少）

二：固定的class和动态class（数组语法）

// 效果等价于 class='类名0 类名1 类名2',因为不是动态绑定的
<div class='类名0' :class="['类名1','类名2']"></div>

// 此时不带引号 类名1,类名2 是变量。一般用于接收服务器返回的class
<div class='类名0' :class="[类名1,类名2]"></div>

示例：绑定不同的class

<!--父div，子div自动换行-->
<div style="display: flex;flex-wrap:wrap">
	<!--for循环data数据，根据子div不同的状态,显示不同的样式-->
	<div :class="{'class1':i.state==0,'class2':i.state==1}" v-for="i in data" :key="i.id">
			<span>子div内容</span>
	</div>
</div>

<style scoped>
    .class1{
    /*样式1*/
    }
    .class2{
    /*样式2*/
    }
</style>

v-band绑定style

对象语法

 // 注意：如果属性值没加单引号，会被解析成变量
 
<div :style="{ CSS属性名1 : '属性值' , CSS属性名1 : '属性值' }"></div>
// 解析属性值
<div :style="{fontSize: '20px' }"></div>
// 解析变量
<div :style="{fontSize: myFontSize1 }"></div>
<div :style="{fontSize: myFontSize2  + 'px'}"></div>

// js部分
const vm = new Vue({
	el: '#app',
	data: {
		myFontSize1 : 16px
		myFontSize2 : 16
	}
})

数组语法

<div :style="[{ CSS属性名1 : '属性值' }，{ CSS属性名1 : '属性值' }]"></div>

CSS属性名1 : ‘属性值’ }，{ CSS属性名1 : ‘属性值’ }]">