vue :style和:class

1. :style

1)对象

        CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

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

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

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

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

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

        同样的，对象语法常常结合返回对象的计算属性使用。 

2)数组

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

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

data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  },
  overridingStyles: {
    backgroundColor:'pink'
  }
}

        加上三元运算符

<div :style="[dateTab==1?{ backgroundSize: '100%'}:{  backgroundSize: '100%'}]"</div>

data: {
    dateTab:1
}

2. :class

1)对象

    动态地切换 class

<div :class="{ active: isActive ,'tag_commoditylist': dataType=='abc'}"></div>

data: {
  isActive:true,
  dataType:'abc'
}

     最终渲染结果

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

2)数组

        用三元表达式

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

data: {
    isActive:true
}

        这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法

<div :class="[{ active: isActive }, errorClass]"></div>