vue3组合式api修改样式的代码
时间: 2024-04-29 09:22:16 浏览: 14
在Vue3中,我们可以使用Composition API(组合式API)来修改样式。下面是一个简单的示例代码:
```html
<template>
<div class="box" :style="boxStyle"></div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const boxWidth = ref('100px');
const boxHeight = ref('100px');
const boxStyle = computed(() => {
return {
width: boxWidth.value,
height: boxHeight.value,
backgroundColor: 'red',
borderRadius: '10px'
}
});
// 使用setTimeout模拟异步修改样式的情况
setTimeout(() => {
boxWidth.value = '200px';
boxHeight.value = '200px';
}, 2000);
return { boxStyle };
}
}
</script>
<style>
.box {
margin: 50px auto;
}
</style>
```
在这个示例中,我们使用了`ref`函数创建了两个响应式数据`boxWidth`和`boxHeight`,并且使用`computed`函数创建了一个计算属性`boxStyle`,用来动态计算样式对象。在模板中,我们使用`:style`绑定了这个计算属性,并将样式应用到了一个`<div>`元素上。
在`setup`函数中,我们还使用了`setTimeout`函数来模拟异步修改样式的情况。在异步回调函数中,我们修改了`boxWidth`和`boxHeight`的值,此时计算属性`boxStyle`会自动更新,从而实现了动态修改样式的效果。
需要注意的是,我们不能直接在模板中使用对象形式的样式绑定,比如`:style="{ width: boxWidth, height: boxHeight }"`,因为这样会将`boxWidth`和`boxHeight`直接转化为字符串,而不是响应式数据。因此,我们必须使用计算属性来动态计算样式对象。