Vue 实现tabs标签页的切换

Vue 实现tabs标签页的切换

<template>
	<div class="aside">
        <div
          class="asideList"
          :class="{active:number == index}"
          v-for="(item,index) in list"
          :key="index"
          @click="tabList(index)"
        >
          <div class="asideInfo">
            <img :src="item.icon" alt />
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="content" v-for="(item,index) in listDetail" :key="index" v-show="number == index">
        <div class="field">
          <p class="title">{{item.name}}</p>
          <el-divider></el-divider>
          <div class="detailInfo" v-show="showDetailInfo">
            <img :src="item.imgUrl" alt />
            <div>
              <p>{{item.textTitle}}</p>
              <p>{{item.textInfo}}</p>
            </div>
          </div>
       </div>
     </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 0,
          name: "条目1",
          icon: "图片地址"
        },
        {
          id: 1,
          name: "条目2",
          icon: "图标地址"
        },
        {
          id: 2,
          name: "条目3",
          icon: "图标地址"
        },
        {
          id: 3,
          name: "条目4",
          icon: "图标地址"
        }
      ],
      listDetail: [
        {
          id: 0,
          name: "条目1",
          imgUrl:"图标地址",
          textTitle: "标题,",
          textInfo: "信息"
        },
        {
          id: 1,
          name: "条目2",
          imgUrl:"图片地址",
          textTitle: "标题",
          textInfo: "信息"
        },
        {
          id: 2,
          name: "条目3",
          imgUrl:"图片地址",
          textTitle: "标题",
          textInfo: "信息"
        },
        {
          id: 3,
          name: "条目4",
          imgUrl:"图片地址",
          textTitle: "标题",
          textInfo: "信息"
        }
      ],
      number: "0",
      }
    },
  methods:{
    tabList(index) {
      this.number = index;
      console.log(this.number);
    },
  }
 }

<style lang="less" scoped>
.asideList{
	&.active {
         color: #3482fd;
         background: #f4f8fc;
         border-left: 4px solid #307ffd;
   	}
}	
</style>