vue 使用 ref 添加删除类名

可以使用 Vue 中的 `$refs` 来获取元素的引用，然后使用 `classList` 属性来添加或删除类名。具体步骤如下：

1. 在模板中给元素添加 `ref` 属性，如下所示：

   <div ref="myDiv">这是一个div元素</div>

2. 在 Vue 实例中使用 `$refs` 获取元素的引用：

   export default {
     methods: {
       addClassName() {
         this.$refs.myDiv.classList.add('my-class')
       },
       removeClassName() {
         this.$refs.myDiv.classList.remove('my-class')
       }
     }
   }

3. 在相应的方法中使用 `classList` 的 `add()` 方法来添加类名，使用 `remove()` 方法来删除类名。

   <button @click="addClassName">添加类名</button>
   <button @click="removeClassName">删除类名</button>

这样就可以通过 `$refs` 来获取元素的引用，并且使用 `classList` 添加或删除类名了。

相关问题

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` 的内容动态添加或移除指定的类名。

vue3中动态添加类名，点击哪个，哪个背景颜色变化

在Vue3中，为了实现动态添加类名并根据点击改变元素的背景颜色，你可以利用JavaScript模板字符串、`v-bind:class`指令以及事件处理程序。首先，在HTML部分，为每个需要响应点击的元素添加一个`<div>`，并在其`class`属性上使用`v-bind:class`：

<div v-for="(item, index) in items" :key="index" @click="changeColor(index)">
  <div :class="{ active: isSelected(index) }">{{ item.name }}</div>
</div>

这里假设`items`是一个包含你要操作的对象数组，每个对象有一个`name`属性。`isSelected`函数用于判断当前元素是否被选中。

然后，在Vue组件的script部分，定义`selectedColors`数据来存储每个元素的初始状态，并实现`changeColor`方法：

export default {
  data() {
    return {
      items: ...,
      selectedColors: { [index]: false for (let index = 0; index < this.items.length; index++) },
    };
  },
  methods: {
    isSelected(index) {
      return this.selectedColors[index];
    },
    changeColor(index) {
      this.selectedColors[index] = !this.selectedColors[index]; // 双向切换状态
      // 如果你想更改背景色，可以这样：
      this.$refs[index].style.backgroundColor = this.selectedColors[index] ? 'your-color' : '';
    },
  },
};

这里，我们使用了ref属性来访问每个元素的DOM节点，然后通过修改`selectedColors`对象来控制背景颜色。当点击某个元素时，它会切换`active`类，从而触发背景颜色的变化。