vue- 动态绑定style样式通过v-bind:style可以为元素动态绑定内联style样式。样式属性名可以使用驼

通过v-bind:style可以为元素动态绑定内联style样式。

样式属性名可以使用驼峰命名法。

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

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

也可以直接将样式对象绑定到style中。

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

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

可以使用数组，将多个样式对象存放在数组中再绑定到style上。

<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  }，
  overridingStyles：{
      width:'30px'
  }
}