vue实现tab栏切换

html

 <ul class="tab">
        <li v-for="(item,index) in tabs" @click="tab(index)"><a href="javascript:;" :class="{active:index == num}">{{item}}</a></li>//因为如果给li添加下边框，下边框的宽度始终和li的宽度一样，所以添加了a标签，然后用伪元素写了一个下边框
    </ul>

js

<script>
export default {
  data() {
    return {
      tabs: [
        "全部",
        "旅游出行",
        "交通安全",
        "成人保险",
        "儿童保险",
        "中老年保险"
      ],
      tabContents: ["内容一", "内容二", "内容三","内容三","内容三","内容三"],
      num: 0,
      productList: []
    };
  },
  methods: {
    tab(index) {
      this.num = index;
    },
    goDetails(){
      this.$router.push({path:'/product/details'})
    }
  }
};
</script>

css

.tab {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            li {
                float: left;
                width: 16.6%;
                text-align: center;
                padding: 30px 0;
                a {
                    color: #999;
                }
                .active {
                    color: #6fb1bd;
                    font-size: 18px;
                    position: relative;
                    &:after {
                        position: absolute;
                        left: 0;
                        bottom: -6px;
                        content: '';
                        width: 100%;
                        height: 4px;
                        background: #6fb1bd;
                        ;
                        border-radius: 4px;
                    }
                }
            }
        }