vue2动态加class

Vue.js 2.x 中动态添加 class 到 HTML 元素通常通过 `v-bind:class` 或者更简洁的 `:class` 特性来实现。这个特性允许你在模板中根据数据的变化动态地给元素添加或移除 CSS 类名。它的基本语法如下：

<div :class="{'active': isActive, 'highlight': isHighlighted}"></div>

在这个例子中，`isActive` 和 `isHighlighted` 是绑定到组件实例的数据属性，如果它们的值为真(`true`)，对应的 CSS 类别（`active` 和 `highlight`）就会被应用到元素上。

你可以使用三元表达式、计算属性或函数来决定哪些类会被添加。例如：

<div :class="{ active: showActiveClass, highlight: showHighlightClass }"></div>

// 或者使用计算属性
<div :class="computedClasses"></div>
<script>
export default {
  data() {
    return {
      showActiveClass: false,
      showHighlightClass: true,
      computedClasses: {
        get() {
          return { active: this.showActiveClass, highlight: this.showHighlightClass };
        },
        set(newClasses) {
          this.showActiveClass = newClasses.active;
          this.showHighlightClass = newClasses.highlight;
        }
      }
    }
  }
}
</script>