如何利用vue实现一个选项卡切换效果

如何利用vue做一个选项卡切换效果，下面web建站小编给大家简单介绍一下具体实现代码！

具体实现代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in tabs" :key="index" :class="{ active: item.active }"
 @click="selectedTab = item">
        {{ item.name }}
      </li>
    </ul>

    <div v-for="(item, index) in tabs" :key="index" v-if="item.active">
      {{ item.content }}
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        tabs: [
          { name: 'tab1', content: '内容1', active: true }, //默认
          { name: 'tab2', content: '内容2', active: false },
          { name: 'tab3', content: '内容3', active: false }
        ]
      }
    },
     
    computed: {
      selectedTab() {
        return this.tabs.find(item => item.active);
      }
    },
     
   methods: {
      selectTab(item) {
        this.tabs.forEach(item => item.active = false);
        item.active = true;
      }
    }
  }
</script>