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;
					}
				}
			}
		}