手把手教你使用Vue实现一个tab栏切换功能

npm install -g vue-cli

vue init webpack my-tab

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import Tabpane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>