Class 与 Style 如何动态绑定？

Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

对象语法：

<div v-bind:class="{ active: isActive }"></div>
data: {
  isActive: true
}

数组语法：

<div v-bind:class="[isActive ? activeClass : '']"></div>
data: {
  activeClass: 'active'
}

Style 也可以通过对象语法和数组语法进行动态绑定：

对象语法：

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

数组语法：

<div v-bind:style="[styleColor, styleSize]"></div>
data: {
  styleColor: {
     color: 'pink'
   },
  styleSize:{
     fontSize:'23px'
  }
}