vue绑定class和style的用法

1、class绑定

用法一：:class可以与class同时使用
<div class="static" :class="{'nav':flag}"></div>

用法二：
<div :class="classObject"></div>

或者如果不想写死Bool的值，可以定义在computed中
<div :class="classObject1"></div>

用法三：数组的写法
可以使用三目表达式
<div :class="['nav',flag?'header':'footer']"></div>

export default{
	data(){
		return{
			flag:true,
			classObject:{
				'header':true,
				'footer':true
			}
		}
	},
	computed{
		classObject1(){
			return {
				'nav-bar':this.flag
			}
		}
	}
}

css类
.nav{}
.header{}
.footer{}
.nav-bar{}

2、style绑定

用法一：property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
<div :style="backgroundColor:myColor"></div>

用法二：直接绑定一个对象
<div :style="styleObject"></div>

用法三：数组写法,同样可以使用三目运算符
<div :style="[bgStyle,shadowStyle]"></div>

export default{
	data(){
		return{
			myColor:'red',
			styleObject:{
				color:'red',
				fontSize:'12px'
			},
			bgStyle:{
				backgroundColor:'red'
			},
			shadowStyle:{
				boxShadow: "5px 5px 5px 5px #456"
			}
		}
	}
}