vue中如何动态绑定style和class

在Vue中，可以使用 `v-bind` 指令来动态绑定 `style` 和 `class`。

1. 绑定 `style`

可以使用以下方式来动态绑定 `style`：

- 对象语法

<template>
  <div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">
    Dynamic style binding
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 20,
    }
  },
}
</script>

- 数组语法

<template>
  <div v-bind:style="[baseStyles, extraStyles]">
    Dynamic style binding
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStyles: { color: 'red', fontSize: '20px' },
      extraStyles: { fontWeight: 'bold' },
    }
  },
}
</script>

2. 绑定 `class`

可以使用以下方式来动态绑定 `class`：

- 对象语法

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

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

- 数组语法

<template>
  <div v-bind:class="[baseClass, extraClass]">
    Dynamic class binding
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseClass: 'text-primary',
      extraClass: 'font-weight-bold',
    }
  },
}
</script>

以上是Vue中动态绑定 `style` 和 `class` 的基本用法，你可以根据自己的需求来进行扩展。