列表内容根据按钮切换（vue）

列表内容根据按钮切换（vue）

1.列表按钮切换：view代码

<view class="">
<!-- 菜单少直接写死，用class判断条件，将0或1传值； -->
			<view class="flex">
				<view class="flex-sub padding-sm margin-xs radius "
				v-bind:class="TabCur==0? 'bg-grey' : 'bg' " @click="getItem(0)">加分记录</view>
				<view class="flex-sub padding-sm margin-xs radius" 
				v-bind:class="TabCur==1? 'bg-grey' : 'bg' " @click="getItem(1)">减分记录</view>
			</view>
<!-- 列表使用v-for循环 -->			
			<view class="switchList" v-for="(item,index) in list">
				<view class="">
					<view class="">{{item.name}}</view>
					<view class="">{{item.time}}</view>
				</view>
				<view class="grades">{{item.grades}}</view>
				<!-- <view class="spaceRoute"></view>	 -->
			</view>
		</view>

2.未调用接口的情况下，设置空数组，分别写出两个列表下的数组（手动分类）：

list:[],
list1:[
	{name:"四月卫生评级前三名",time:"2021.04.01",grades:"+0.5"},
	{name:"四月卫生评级前三名",time:"2021.04.01",grades:"+0.5"},
	{name:"四月卫生评级前三名",time:"2021.04.01",grades:"+0.5"},
	{name:"四月卫生评级前三名",time:"2021.04.01",grades:"+0.5"}
],
list2:[
	{name:"投诉",time:"2021.04.01",grades:"-0.5"},
	{name:"投诉",time:"2021.04.01",grades:"-0.5"},
	{name:"投诉",time:"2021.04.01",grades:"-0.5"},
	{name:"投诉",time:"2021.04.01",grades:"-0.5"}
]

3.初始化及方法

onLoad() {
			this.list = this.list.concat(this.list1);
},
methods: {
			getItem(index){
				// 点击哪个切换哪个
				console.log(index)
				this.TabCur =index;
				// 判断点击的是什么,将值传回空数组
				if(this.TabCur==0){
					this.list=[];	
					// 使用concat方法进行数组拼接
					this.list = this.list.concat(this.list1);
					console.log('加分------'+JSON.stringify(this.list) )
					console.log(this.list.length)
				}
				if(this.TabCur==1){
					this.list=[];
					this.list = this.list.concat(this.list2);
					console.log('减分------'+JSON.stringify(this.list))
					console.log(this.list.length)
				}	
			}

未放出css代码；

效果图：