vue篇之动态绑定class和style

vue可以使用v-bind指令给标签动态绑定class和style

一、动态绑定class：

动态绑定class共3种方式：

1.绑定单个class

<template>
	<div :class="class1"></div>
</template>
<script>
export default{
	data(){
		return {
			class1:'bg'
		}
	}
}
</script>
<style>
	.bg{
		background-color:red;
	}
</style>

2.用数组绑定多个class

2.1 数组里面的项是字符串

<div :class="['class1','class2','class3']"></div>

2.2 数组里面的项是变量名

<template>
	<div :class="[class1,class2,class3]"></div>
</template>
<script>
export default{
	data(){
		return {
			class1:'bg',
			class2:'cl',
			class3:'bd'
		}
	}
}
</script>
<style>
	.bg{
		background-color:red;
	}
	.cl{
		color:green;
	}
	.bd{
		border:1px solid black;
	}
</style>

2.3 数组里面的项是对象

注意：对象的key就是类的名字，对象的key不是变量名

<div :class="[{bg:boolean}]"></div>

3 用对象绑定单个class

注意：对象的key就是类的名字，对象的key不是变量名

<div :class="{bg:boolean}"></div>

二、动态绑定style：

1.对象写法

css属性名可用下划线写法，需加引号：‘background-color’
css属性名也可用驼峰写法，加不加引号都可：backgroundColor
注意：
1.对象的key就是ccs属性的名字，对象的key不是变量名
2.多个属性建议直接给style绑定一个对象

<div :style="{backgroundColor:'red'}"></div>

2.数组写法

<div :style="[bg,cl]"></div>

注意：class和style都建议用对象的格式绑定