Vue3中如何实现4个element plus button，选择哪一个哪一个就高亮，同时显示不同的页面

可以通过给每个按钮绑定一个点击事件，在点击事件中修改选中状态以及显示对应页面的方式来实现。具体实现步骤如下：

1. 在 Vue3 的 setup 函数中定义一个选中状态的变量和一个页面列表：

import { ref } from 'vue';

export default {
  setup() {
    // 定义选中状态，默认选中第一个
    const selectedIndex = ref(0);

    // 定义页面列表
    const pages = [
      { name: 'Page 1', content: '这是第1个页面' },
      { name: 'Page 2', content: '这是第2个页面' },
      { name: 'Page 3', content: '这是第3个页面' },
      { name: 'Page 4', content: '这是第4个页面' },
    ];

    return {
      selectedIndex,
      pages,
    };
  },
};

2. 在页面中使用 Element Plus 的 Button 组件来渲染4个按钮，并给每个按钮绑定点击事件：

<template>
  <div>
    <el-button v-for="(page, index) in pages" :key="index" @click="selectedIndex = index" :type="selectedIndex === index ? 'primary' : 'default'">{{ page.name }}</el-button>
    <div v-for="(page, index) in pages" :key="index" v-show="selectedIndex === index">{{ page.content }}</div>
  </div>
</template>

其中，通过 computed 计算属性来判断当前选中的按钮是哪一个，如果是当前按钮则设置为 primary 类型，否则为 default 类型；通过 v-show 来显示对应的页面内容，只有当前选中的页面才会显示。

这样就可以实现4个 Element Plus Button，选择哪一个哪一个就高亮，并且显示不同的页面了。