uniapp+vue3获取dom元素动态添加类名
时间: 2025-01-20 15:09:09 浏览: 108
在uniapp中使用Vue 3获取DOM元素并动态添加类名,可以通过以下步骤实现:
1. **获取DOM元素**:使用`ref`属性来引用DOM元素。
2. **动态添加类名**:在Vue 3的`setup`函数中使用`ref`和`onMounted`生命周期钩子来操作DOM元素。
以下是一个具体的示例:
```vue
<template>
<div ref="myDiv" class="default-class">这是一个div元素</div>
<button @click="addClass">添加类名</button>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
const addClass = () => {
if (myDiv.value) {
myDiv.value.classList.add('new-class');
}
};
onMounted(() => {
// 你可以在此处进行其他DOM操作
});
return {
myDiv,
addClass
};
}
};
</script>
<style>
.default-class {
width: 100px;
height: 100px;
background-color: lightblue;
}
.new-class {
border: 2px solid red;
}
</style>
```
在这个示例中:
1. 使用`ref`引用了一个`div`元素,并通过`ref="myDiv"`将其绑定到`myDiv`变量上。
2. 在`setup`函数中定义了一个`addClass`方法,该方法会在点击按钮时被调用,并给`div`元素添加一个`new-class`类名。
3. 在`onMounted`生命周期钩子中可以进行其他的DOM操作。
4. 在样式部分,定义了两个类名:`default-class`和`new-class`,分别设置了不同的样式。
阅读全文
相关推荐


















