Vue3中如何实现4个element plus button，选择哪一个哪一个就高亮

可以使用Vue3中的v-bind:class指令来实现此功能。

首先，在Vue组件的data属性中定义一个变量highlightedButton，用来记录当前高亮的按钮编号。

然后，在button标签中使用v-bind:class指令，将按钮的class属性绑定到一个计算属性上。计算属性返回一个对象，其中包含了当前按钮是否应该高亮的判断逻辑。

举个例子，假设有四个按钮，分别编号为1、2、3、4。当用户点击第三个按钮时，我们将highlightedButton设置为3。计算属性将根据highlightedButton的值来判断每个按钮是否应该高亮。

Vue组件的代码如下：

<template>
  <div>
    <button 
      v-bind:class="{ 'highlighted': highlightedButton === 1 }"
      @click="highlightedButton = 1"
    >
      Button 1
    </button>
    <button 
      v-bind:class="{ 'highlighted': highlightedButton === 2 }"
      @click="highlightedButton = 2"
    >
      Button 2
    </button>
    <button 
      v-bind:class="{ 'highlighted': highlightedButton === 3 }"
      @click="highlightedButton = 3"
    >
      Button 3
    </button>
    <button 
      v-bind:class="{ 'highlighted': highlightedButton === 4 }"
      @click="highlightedButton = 4"
    >
      Button 4
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      highlightedButton: 0, // 初始化为0表示没有按钮高亮
    };
  },
};
</script>

<style>
.highlighted {
  background-color: yellow;
}
</style>

在上面的代码中，每个按钮都绑定了一个点击事件，当用户点击按钮时，highlightedButton的值会被更新。计算属性根据highlightedButton的值来判断每个按钮是否应该高亮，从而实现了按钮高亮的功能。在这个例子中，我们使用了一个简单的CSS样式来表示高亮状态，你可以根据需求自定义样式。