vue3 setup 修改 div的css类名称
时间: 2023-05-29 07:04:21 浏览: 161
要修改一个 div 元素的 CSS 类名,可以使用 Vue3 的 `setup()` 函数中的 `ref` 和 `computed` 方法来实现。以下是一个示例:
```html
<template>
<div :class="myClass"></div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const myClass = ref('default-class');
// 修改 myClass 的值
function changeClass() {
myClass.value = 'new-class';
}
return {
myClass: computed(() => myClass.value)
};
}
};
</script>
```
在上面的代码中,我们使用了 `ref` 方法来创建一个名为 `myClass` 的响应式变量,并将其初始化为 `'default-class'`。接下来,我们定义了一个 `changeClass` 函数,以便在需要时修改 `myClass` 的值。
最后,我们使用 `computed` 方法来返回一个计算属性 `myClass`,它的值是 `myClass.value`。这样,当 `myClass` 的值发生变化时,计算属性也会自动更新,从而使得绑定到 `:class` 上的 CSS 类名也会相应地改变。