vue :class 动态绑定样式

Vue中的:class指令可以让我们在html元素中绑定动态的样式。它可以直接绑定一个对象，其中属性名为样式名，属性值为样式值，也可以绑定一个返回对象的计算属性。这样就可以根据不同的条件动态的改变元素的样式。

:class的语法格式有两种：

1. 对象语法

语法格式：:class="{ '样式名1':条件1, '样式名2':条件2, ... }"
示例：

<template>
  <div :class="{ 'active': isActive }"></div>
</template>

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

<style>
.active {
  color: red;
}
</style>

2. 数组语法

语法格式：:class="['样式名1', '样式名2', ...]"
示例：

<template>
  <div :class="['active', 'bold']"></div>
</template>

<style>
.active {
  color: red;
}

.bold {
  font-weight: bold;
}
</style>

:class也可以和v-bind一起使用，用于绑定多个class。语法格式：v-bind:class="[ '样式1', { '样式名2': 条件2 }, ...]"

总的来说，Vue中:class指令是非常强大的，可以通过简单的语法方便地绑定动态样式，让网页的交互效果更加出色。