Vue动态绑定Class与Style

在Vue中，可以使用v-bind:class或简写为:class来动态绑定class，使用v-bind:style或简写为:style来动态绑定style。

动态绑定Class：

<div :class="{ active: isActive, 'text-success': hasSuccess }"></div>

new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasSuccess: false
  }
})

这里active类将根据数据属性isActive的布尔值来应用，text-success类将根据hasSuccess的布尔值来应用。

动态绑定多个Class：

<div :class="classObject"></div>

new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
})

动态绑定Style：

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

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 30
  }
})

动态绑定内联样式：

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

new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '25px'
    }
  }
})

以上代码展示了如何在Vue中动态绑定class和style。