Vue中动态class的多种写法

当我们在Vue中需要动态地给元素添加或切换class时，可以使用以下多种写法：

1. 对象语法

使用对象语法可以动态地添加或删除多个class。

示例代码：

<template>
  <div v-bind:class="{ activated: isActive, 'text-danger': hasError }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

解释：上述代码中，v-bind:class指令绑定了一组class，并通过对象语法来实现对class的增删操作。当isActive为true时，会自动添加activated这个class；当hasError为true时，会自动添加text-danger这个class。

2. 数组语法

使用数组语法可以动态地切换class。

示例代码：

<template>
  <div v-bind:class="[color, size]"></div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      size: 'font-size-24'
    }
  },
  methods: {
    changeStyle() {
      if (this.color === 'red') {
        this.color = 'blue'
        this.size = 'font-size-18'
      } else {
        this.color = 'red'
        this.size = 'font-size-24'
      }
    }
  }
}
</script>

解释：上述代码中，v-bind:class指令绑定了一组class，并通过数组语法来实现切换class的操作。通过changeStyle方法可以来动态地切换color和size的值，从而实现动态改变元素的样式。

除此之外，还有很多其他的写法，例如computed属性、directives自定义指令等，根据实际情况选择使用即可。

总体上讲，动态class是Vue中非常常见的一种操作，我们可以根据实际需要选择不同的方式来实现。