Vue3中两个按钮样式来回切换

你可以通过Vue3中的data属性和v-bind绑定class来实现这个功能。在data属性中声明一个布尔变量来表示按钮样式的切换状态，然后使用v-bind绑定class来动态修改按钮的样式。

以下是一个简单的示例代码：

<template>
  <div>
    <button :class="{ active: isActive }" @click="toggleActive">Button 1</button>
    <button :class="{ active: !isActive }" @click="toggleActive">Button 2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.active {
  background-color: blue;
  color: white;
}
</style>

在上面的代码中，我们声明了一个布尔变量isActive来表示按钮样式的状态。在模板中，使用v-bind绑定class来动态修改按钮的样式。当isActive为true时，第一个按钮的样式为active，第二个按钮的样式为非active；当isActive为false时，第一个按钮的样式为非active，第二个按钮的样式为active。在toggleActive方法中，我们通过修改isActive的值来实现按钮样式的切换。