vue 使用 ref 添加删除类名
时间: 2023-07-11 10:06:01 浏览: 643
vue中的ref使用
5星 · 资源好评率100%
可以使用 Vue 中的 `$refs` 来获取元素的引用,然后使用 `classList` 属性来添加或删除类名。具体步骤如下:
1. 在模板中给元素添加 `ref` 属性,如下所示:
```html
<div ref="myDiv">这是一个div元素</div>
```
2. 在 Vue 实例中使用 `$refs` 获取元素的引用:
```javascript
export default {
methods: {
addClassName() {
this.$refs.myDiv.classList.add('my-class')
},
removeClassName() {
this.$refs.myDiv.classList.remove('my-class')
}
}
}
```
3. 在相应的方法中使用 `classList` 的 `add()` 方法来添加类名,使用 `remove()` 方法来删除类名。
```html
<button @click="addClassName">添加类名</button>
<button @click="removeClassName">删除类名</button>
```
这样就可以通过 `$refs` 来获取元素的引用,并且使用 `classList` 添加或删除类名了。
阅读全文