vue元素样式class和style的绑定

在项目中基于业务需求动态控制元素样式的时候，需要进行一些特殊的处理
   静态样式直接编写即可：<div class="box" style="margin: 20px auto;">

使用v-bind：来设置行内样式

在动态的STYLE中，基于对象方式处理

属性名：修改的样式    属性名使用驼峰命名法 fontSize zIndex ...

属性值：设置的样式“值”

对于calss

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

或

<div class="static" :style="{ color:isActive ? 'red':'black'}"> </div>

对于内联样式

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

或者直接绑定对象

<div v-bind:style="styleObject"></div>

data设置如下

class

data: { isActive: true, hasError: false } 

内联：

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

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

那么渲染的结果 为

class：

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

内联：

<div v-bind:style="{ color: ‘red’, fontSize:  '30px' }"></div>

在动态的STYLE中，基于对象方式处理  

[属性名1，属性名2，....] 当然数组也可以使用三元表达式

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

 data设置如下：

data: { activeClass: 'active', errorClass: 'text-danger' }

那么渲染结果为：

<div class="active text-danger"></div>