采用您这种方式出现了错误 TypeError: Cannot read property 'contains' of undefined
时间: 2023-08-19 18:24:49 浏览: 38
出现这个错误可能是因为在组件的 `mounted` 钩子函数中获取 `ref` 对应的 DOM 元素时,组件还没有挂载完成,所以获取到的 `ref` 对应的 DOM 元素为 `undefined`。
如果你在 `mounted` 钩子函数中需要获取 `ref` 对应的 DOM 元素,可以使用 `$nextTick` 方法,在组件挂载完成后再获取 DOM 元素。具体代码如下:
```html
<template>
<div ref="myDiv" class="box"></div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
const myDiv = this.$refs.myDiv;
if (myDiv && myDiv.classList.contains("box")) {
myDiv.classList.remove("box");
myDiv.classList.add("new-box");
}
});
},
};
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.new-box {
width: 150px;
height: 150px;
background-color: blue;
}
</style>
```
上述代码中,我们使用 `$nextTick` 方法,在组件挂载完成后再获取 `ref` 对应的 DOM 元素,并判断其是否含有 `box` 类,如果含有则先移除 `box` 类,再添加 `new-box` 类,从而修改了 DOM 元素的样式。