vue动态绑定class和style，三目运算符条件判定

动态绑定class和style

给绑定的class/style传递一个对象，以动态切换

<div :class="{class1: isActive1, 'class2': isActive2}"
		:style="{width: size + 'px', color: colorStyle}"></div>

给绑定的class传递一个数组，以应有一个class列表

//三元运算
<div :class="[isActive1 ? class1 : '', class2]"></div>
//数组对象
<div :class=[{class1: isActive1}, class2]></div>

给绑定的style传递一个样式对象
*class也可以绑定样式对象，不过推荐使用计算属性

//一个样式对象
<div :style="styleObject1"></div>
//多个样式对象
<div :style="[styleObject1, styleObject2]"></div>

data:{
	styleObject1: {
		color：'#fff',
		width: '20px'
	},
	styleObject2: {
		color：'#000',
		width: '30px'
	}
}

---

其他例子

#标签内容（三目运算）

{{button？ ‘取消’ ：‘确定’}}

//【例子】
<el-button class="button" 
			type="primary" 
			@tap="handleClick">{{button? '取 消' : '确 定'}}
</el-button>

---

#类名

：class = “[className ? ‘xx’ : ‘xx’]”

//【例子】
<input :class="[className ? 'class1' : 'class2']"
		:model="inputValue"
		:placeholder="placeholder"
/>

---

#内联样式（多样式、两种写法、三目）

：style=“[{background: ${bgColor}, color: textColor}]”
（红色字由反引号括起）

//【例子】
<input v-model="text" 
		:placeholder="placeholder" 
		:style="[{background: `${bgColor}`, color: fontColor}]"/>
		
<input v-model="text" 
		:placeholder="placeholder" 
		 :style="{'color' : (isColor ? '#999':'#000')}" />