VUE3 一个按钮按下去，另外一个按钮变成绿色，再按下去 变成灰色。VUE+ts代码实现

你可以使用Vue 3和TypeScript来实现这个功能。下面是一个示例代码：

<template>
  <div>
    <button :style="{ backgroundColor: button1Color }" @click="toggleButtonColor">
      Button 1
    </button>
    <button :style="{ backgroundColor: button2Color }" @click="toggleButtonColor">
      Button 2
    </button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  data() {
    return {
      button1Color: 'gray',
      button2Color: 'gray',
    };
  },
  methods: {
    toggleButtonColor() {
      if (this.button1Color === 'gray') {
        this.button1Color = 'green';
      } else if (this.button1Color === 'green') {
        this.button1Color = 'gray';
      }

      if (this.button2Color === 'gray') {
        this.button2Color = 'green';
      } else if (this.button2Color === 'green') {
        this.button2Color = 'gray';
      }
    },
  },
};
</script>

在这个示例中，我们使用了Vue的响应式变量ref来跟踪按钮的颜色。初始情况下，两个按钮的颜色都是灰色。当按钮被点击时，我们通过切换按钮颜色的方式来改变它们的状态。如果按钮的颜色是灰色，点击后变为绿色，如果按钮的颜色是绿色，点击后变为灰色。通过动态绑定样式，我们可以根据按钮的颜色来设置按钮的背景色。

请注意，这只是一个示例代码，你可以根据你的需求进行调整和优化。希望能对你有所帮助！