如何使用Vue和Element-UI实现标签页的切换功能

npm install vuenpm install element-ui

<template>  <div>    <el-tabs v-model="activeIndex" @tab-click="handleTabClick">      <el-tab-pane :label="item.label" :key="item.name" v-for="item in tabs" :name="item.name"></el-tab-pane>    </el-tabs>    <div v-show="activeIndex === 'home'" class="content">Home Page</div>    <div v-show="activeIndex === 'about'" class="content">About Page</div>    <div v-show="activeIndex === 'contact'" class="content">Contact Page</div>  </div></template><script>export default {  data() {    return {      activeIndex: 'home',      tabs: [        { name: 'home', label: '首页' },        { name: 'about', label: '关于' },        { name: 'contact', label: '联系我们' }      ]    };  },  methods: {    handleTabClick(tab) {      this.activeIndex = tab.name;    }  }};</script><style scoped>.content {  margin-top: 20px;  padding: 20px;  background-color: #f5f5f5;}</style>

// main.jsimport Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import TabSwitch from './TabSwitch.vue';Vue.use(ElementUI);new Vue({  render: h => h(TabSwitch)}).$mount('#app');