Vue动态绑定样式的几种方式

项目中时常会遇到需要动态改变样式的情况，这里总结一下常用的几种方法。

动态改变class

绑定单个的class

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

对象语法：用大括号{}将class名称和变量名括起来，class名称要加引号。

绑定多个class

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

与绑定单个的方式同理，多个样式用,隔开。

也可以用数组语法，列出变量名。

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

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

结合三元运算符绑定

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

同样是使用的数组语法。

动态改变style

绑定单个style

<div class="controller" :style="{ color: activeColor }"></div>

与class同理，使用对象语法

绑定多个style

同理，既可以使用对象语法，也可以使用数组语法。（数组语法相对比较繁琐，不推荐。）

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

<div class="controller" :style="[baseStyles, overridingStyles]"></div>
 data() {
    return {
      baseStyles: "color:'16px'",
      overridingStyles: "fontSize: '20px'"
    };
  },

结合三元表达式

<div class="controller" :style="{paddingTop:controller.summary?'20px':'10px'}"></div>

与class的三元表达式动态绑定方法不同，style使用的是对象法。

数组法的写法更繁琐一些，一般建议直接使用对象法，如果有不需要动态绑定的style属性，则选择数组法。

<div class="controller" :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"></div>