vue table切换 （不使用路由功能）

背景：

　　一个小场景，感觉使用路由功能太浪费了，考虑用一个简单的类控制

实例代码

//v-for 实现循环
<ul class="nav-bar">
　　<li v-for="(list, index) in titleList" :class="{'active':isActive[index]}" :key="list.id" @click="selectNum(index, $event)">日排行</li>
</ul>
<ul class="list-content">
　　<li class="list-item" v-for="(list,index) in nameList" :key="list.id">
    　　<p><i>{{index+1}}</i>{{list.name}}</p>
        <p>{{list.num}}</p>
    </li>
</ul>

data:

//data中定义空数组
isActive: [],
titleList: ['日排行', '周排行', '月排行', '年排行']

 

methods:

selectNum(index, event) {
　　//点击之前初始化数组
　　this.isActive = []
　　//获取index给数组赋值为true
    this.isActive[index] = true
　　//循环判断index的值
    switch(index) {
    　　case 0:
        this.nameList = this.lsit1
        break;
       case 1:
       　　this.nameList = this.lsit2
       　　break;
       case 2:
         this.nameList = this.lsit3
       　　break;
       case 3:
       　　this.nameList = this.lsit4
          break;
     }
}