背景:
一个小场景,感觉使用路由功能太浪费了,考虑用一个简单的类控制
实例代码
//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; }
}