vue简单实现移动端选项卡

html部分：

<div id="app">
 	<navlist></navList>
</div>
  <template id="index0">
    <h1>这是推荐内容</h1>
  </template>
  <template id="index1">
    <h1>这是男装内容</h1>
  </template>
  <template id="index2">
    <h1>这是女装内容</h1>
  </template>
  <template id="index3">
    <h1>这是男女内衣内容</h1>
  </template>
  <template id="index4">
    <h1>这是男鞋内容</h1>
  </template>
  <template id="index5">
    <h1>这是女鞋内容</h1>
  </template>
  <template id="index6">
    <h1>这是箱包皮具内容</h1>
  </template>
  <template id="index7">
    <h1>这是手表配饰内容</h1>
  </template>
  <template id="index8">
    <h1>这是护肤彩妆内容</h1>
  </template>
  <template id="index9">
    <h1>这是个人护理内容</h1>
  </template>
  <template id="index10">
    <h1>这是母婴内容</h1>
  </template>
  <template id="index11">
    <h1>这是运动户外内容</h1>
  </template>
  <template id="index12">
    <h1>这是手机数码内容</h1>
  </template>
  <template id="nav">
    <div>
      <ul class="left">
        <li v-for="(item,index) in list" @click="jump(index)" :class="currentPage == 'index'+index ? 'active' : ''">{{item}}</li>
      </ul>
      <components :is="currentPage" class="right"></components>
    </div>
  </template>

css部分：

 ul,li,body,a,p,h1{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .left{
      width: 20%;
      height: 100vh;
      float: left;
      overflow: auto;
    }
    .right{
      width: 80%;
      height: 100vh;
      float: right;
      overflow: auto;
    }
    .left::-webkit-scrollbar{
      display: none;
    }
    .left li{
      height: 10vh;
      line-height: 10vh;
      text-align: center;
      background: rgb(240, 239, 239);
    }
    .left .active{
      background: #fff;
    }

js部分：

 let index0 = {
      template: '#index0',
    }
    let index1 = {
      template: '#index1',
    }
    let index2 = {
      template: '#index2',
    }
    let index3 = {
      template: '#index3',
    }
    let index4 = {
      template: '#index4',
    }
    let index5 = {
      template: '#index5',
    }
    let index6 = {
      template: '#index6',
    }
    let index7 = {
      template: '#index7',
    }
    let index8 = {
      template: '#index8',
    }
    let index9 = {
      template: '#index9',
    }
    let index10 = {
      template: '#index10',
    }
    let index11 = {
      template: '#index11',
    }
    let index12 = {
      template: '#index12',
    }
    var nav = {
      template: '#nav',
      data(){
        return {
          list: ['推荐','男装','女装','男女内衣','男鞋','女鞋','箱包皮具','手表配饰','护肤彩妆','个人护理','母婴','运动户外','手机数码'],
          currentPage: 'index0',
        }
      },
      components: {
        'index0': index0,
        'index1': index1,
        'index2': index2,
        'index3': index3,
        'index4': index4,
        'index5': index5,
        'index6': index6,
        'index7': index7,
        'index8': index8,
        'index9': index9,
        'index10': index10,
        'index11': index11,
        'index12': index12,
      },
      methods: {
        jump(index){
          this.currentPage = `index${index}`;
        }
      }
    }

    new Vue({
      el: '#app',
      data: {
        num: 0,
        msg: 0,
      },
      computed: {
        
      },
      components:{
        'navlist': nav,
      },
      methods: {
        add(){
          this.num++;
        },
      },
      directives:{
        focus: {
          inserted(el,obj){
            el.focus();
          }
       }
      }
   })