vue使用ref修改一个元素的class

可以使用`this.$refs`来获取元素的引用，然后使用`classList`来修改元素的class。示例如下：

<template>
  <div ref="myDiv" class="my-class"></div>
</template>

<script>
export default {
  methods: {
    changeClass() {
      this.$refs.myDiv.classList.remove('my-class');
      this.$refs.myDiv.classList.add('new-class');
    }
  }
}
</script>

在上面的示例中，`changeClass`方法可以通过`this.$refs.myDiv`获取到引用，并且使用`classList`来删除`my-class`类，添加`new-class`类。

相关问题

vue3如何使用ref给dom元素新添加一个class

在Vue3中，可以使用`ref`来给DOM元素添加一个新的class。在原有的Vue2中，我们通过`ref`引用DOM元素，然后通过`classList`来添加/删除class。而在Vue3中，`ref`的用法有所改变。

首先，我们需要在Vue3的setup函数中定义一个`ref`，并将它绑定到需要操作的DOM元素上。假设我们有一个<button>按钮，我们想给它添加一个新的class，可以将`ref`绑定在这个按钮上，像这样：

<template>
  <button ref="myButton">按钮</button>
</template>

然后，在setup函数中，我们可以通过`ref`来获取到DOM元素的引用，然后使用`value`属性来操作它。

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myButton = ref(null); // 创建一个ref并初始化为null

    // 在mounted钩子函数中给DOM元素添加新class
    onMounted(() => {
      myButton.value.classList.add('new-class');
    });

    return {
      myButton, // 将ref返回，使其在模板中可用
    };
  },
};
</script>

在上面的例子中，我们使用了`onMounted`钩子函数来保证当组件被挂载后，才会执行给DOM元素添加新class的操作。通过`myButton.value`能够访问到真实的DOM元素，然后使用`classList.add`方法来添加新的class。

这样，当组件被渲染并挂载后，就会自动给按钮添加一个新的class "new-class"。

vue如何用ref给元素动态添加class

Vue提供了ref属性，可以给元素添加一个引用，通过这个引用可以在Vue实例中访问到这个元素。在Vue的模板中，可以通过ref属性将一个属性赋值给引用，例如：

<template>
<div ref="myDiv"></div>
</template>

然后在Vue实例中，可以通过this.$refs.myDiv来访问这个元素。如果需要给这个元素动态添加class，可以使用classList属性，例如：

<script>
export default {
mounted() {
this.$refs.myDiv.classList.add('my-class')
}
}
</script>

这个例子中，通过mounted钩子，在组件渲染完成后，通过this.$refs.myDiv获取到这个元素的引用，然后使用classList.add方法，将my-class这个class加入到这个元素中。

除了classList.add方法，还有classList.remove、classList.toggle和classList.contains方法，可以用于删除、切换和查询class。例如，要删除一个class，可以使用classList.remove方法：

this.$refs.myDiv.classList.remove('my-class')

使用Vue的ref属性和classList属性，可以方便地给元素添加和删除class，实现动态样式效果。