vue- 封装选项卡切换

<template>
  <ul>
    <li v-for="(item, index) in navTabList" :key="index" @click="get(index)" :class="{active:index == num}">{{item}}</li>
  </ul>
</template>

<script>
export default {
  props: ['navTabList'],
  name: 'navTab',
  data () {
    return {
      // navTabList: ['产品', '行业', '行业'],
      num: 0
    }
  },
  methods: {
    get (index) {
      this.num = index
      this.$emit('getTabIndex', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  ul
    margin .3rem
  ul li
    padding 0 .5rem
    display inline-block
    height .3rem
    border-left 1px solid #f2f2f2
    font-size .3684rem
    text-align center
    line-height .3rem
    color #aeaeae
  ul li:nth-child(1)
    border-left none!important
  .active
    color #000
</style>