用Vue3写一个两个按钮样式切换
时间: 2024-05-06 12:15:25 浏览: 16
可以使用Vue3的`v-bind:class`指令,根据按钮的状态动态绑定不同的类名来实现样式切换。以下是一个简单的示例代码:
```html
<template>
<div>
<button :class="{ active: isActive1 }" @click="isActive1 = true">按钮1</button>
<button :class="{ active: isActive2 }" @click="isActive2 = true">按钮2</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const isActive1 = ref(true);
const isActive2 = ref(false);
return {
isActive1,
isActive2,
};
},
};
</script>
<style>
.active {
background-color: blue;
color: white;
}
</style>
```
在上面的代码中,使用了Vue3的`ref`函数来定义了两个响应式数据`isActive1`和`isActive2`,分别表示两个按钮的状态。通过`v-bind:class`指令,根据按钮的状态动态绑定了不同的类名`active`,当按钮被点击时,对应的状态会被切换为`true`,从而改变按钮的样式。在样式中,定义了`.active`类的样式,用于控制按钮的样式。