vue2使用refs动态添加类名

在 Vue 2 中，`ref` 是用于获取组件实例内部值的一个特殊属性，它可以让你在模板中直接引用一个 DOM 元素或者计算属性。如果你想通过 `ref` 动态地给元素添加类名，可以按照以下步骤操作：

1. 首先，在Vue组件的模板中声明一个 `ref`，比如创建一个按钮并为其设置 `ref`：

<button ref="myButton">点击我</button>

2. 然后，在 Vue 组件的 `data` 或者 `computed` 属性中定义一个变量来存储你需要改变的类名，例如 `classList`：

export default {
  data() {
    return {
      classList: ''
    };
  }
}

3. 使用 `this.$refs` 来访问到该元素，并通过修改 `classList` 变量来动态添加或删除类名。你可以使用 JavaScript 的 `classList.add()` 和 `classList.remove()` 方法：

methods: {
  changeClass() {
    if (/* 某些条件 */) {
      this.classList = 'your-class-name'; // 添加类名
    } else {
      this.classList = ''; // 移除类名
    }
    this.$refs.myButton.className = this.classList; // 更新DOM
  }
}

4. 在你的模板中添加一个事件监听器（如 `@click`），当触发该事件时，调用 `changeClass` 方法：

<button @click="changeClass" :class="{ active: classList === 'your-class-name'}">点击我</button>

这将使得按钮的 `class` 根据 `classList` 的内容动态添加或移除指定的类名。