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;

     }
}