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

在Vue3中，可以通过以下步骤实现：

1. 定义一个选项卡组件Tab，包含4个按钮和对应的页面：

<template>
  <div>
    <button :class="{ active: active === 0 }" @click="active = 0">按钮1</button>
    <button :class="{ active: active === 1 }" @click="active = 1">按钮2</button>
    <button :class="{ active: active === 2 }" @click="active = 2">按钮3</button>
    <button :class="{ active: active === 3 }" @click="active = 3">按钮4</button>
    <div v-show="active === 0">页面1</div>
    <div v-show="active === 1">页面2</div>
    <div v-show="active === 2">页面3</div>
    <div v-show="active === 3">页面4</div>
  </div>
</template>

2. 在组件中定义一个data属性active，表示当前选中的按钮编号，默认为0：

<script>
export default {
  data() {
    return {
      active: 0
    };
  }
};
</script>

3. 在CSS中定义.active样式，用于高亮当前选中的按钮：

<style>
button.active {
  background-color: #ccc;
}
</style>

4. 在父组件中使用Tab组件：

<template>
  <div>
    <tab></tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  components: {
    Tab
  }
};
</script>

这样就可以实现4个button，选择哪一个哪一个就高亮，同时显示不同的页面。