vue 动态绑定class 和 style 最常用几种方式

1、对象绑定单个 class

<div :class="{'active':isActive}"></div>

data() {
    return {
      isActive: true
    };
  }

结果渲染为

<div class="active"></div>

2、对象绑定多个class，需要逗号隔开就行，这里的 active-three 需要用双引号

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'active-three': hasError }"></div>

data() {
	return {
		isActive: true,
		hasError: true
	};
}

结果渲染为

<div class="activeOne activeTwo activeThree"></div>

3、数组绑定

<div :class="[activeClass, errorClass]"></div>

data() {
	return {
		activeClass: "active",
		errorClass: "disActive"
	};
},

结果渲染为

<div class="active disActive"></div>

4、数组与三元运算符结合判断选择需要的 class

<div :class="[isActive?'active':'disActive']"></div>

data() {
	return {
		isActive: false
	};
},

结果渲染为

<div class="disActive"></div>

5、与三元运算符结合判断选择需要的 class

<div :class=":class="choiceList == index ?'choice':''""></div>

data() {
	return {
		choiceList : index 
	};
},

结果渲染为

<div class="choice"></div>

6、绑定内联样式 对象语法 style

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div :style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

7、绑定内联样式 数组语法 style

<div :style="[baseStyles, overridingStyles]"></div>

// 数组语法可以将多个样式对象应用到同一个元素上

8、绑定内联样式 多重值 style

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

//这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，
// 那么就只会渲染 display: flex。