vue tab切换

方法一：

	<template>
		<div>
			<ul>
        		<li
          		v-for="(item,index) in tabsData"
          		:key="index"
          		:class="{active:tabIndex==index}"
          		@click="handleTabs(index)"
        		>{{item}}
        		</li>
            </ul>
		</div>
	</template>

data(){
	return{
	  tabsData: ["今日", "昨日", "明日"],
	  tabIndex:0
	}
}
methods:{
	handleTabs(index) {
      this.tabIndex = index;
    },
}

.active {
  background: orange;
}

方法二：

<template>
	<div>
		<ul>
        	<li @click="handleTabs2(1)" :class="{tabs2Active:tabs2Index==1}">周一</li>
        	<li @click="handleTabs2(2)" :class="{tabs2Active:tabs2Index==2}">周二</li>
        	<li @click="handleTabs2(3)" :class="{tabs2Active:tabs2Index==3}">周三</li>
        </ul>
	</div>
</template>

data(){
	return{
		  tabs2Index: 1,
	}
},
methods:{
	 handleTabs2(index) {
      console.log("index", index);
      this.tabs2Index = index;
    },
}

.tabs2Active {
  color: rgb(190, 30, 123);
}

方法三：

<template>
	<div>
		 <ul>
        	<li
          	v-for="(item,index) in tabs3Data"
          	:key="index"
         	 @click="handleTab3(item)"
          	:class="['tabItem',item.isSelect?'tab3Active':'noselect']"
        	>{{item.name}}</li>
      </ul>
	</div>
</template>

data(){
	return{
		 tabs3Data: [
        {
          id: 1,
          name: "大",
          isSelect: true,
        },
        {
          id: 2,
          name: "中",
          isSelect: false,
        },
        {
          id: 3,
          name: "小",
          isSelect: false,
        },
      ],
	}
},
methods:{
	handleTab3(item) {
      this.tabs3Data.forEach((item, index) => {
        this.tabs3Data[index].isSelect = false;
      });
      item.isSelect = true;
      //  this.getData(item.name); //可以根据后端需要的字段去掉每个tab数据
    },
}

.tab3Active {
  color: rgb(2, 2, 2);
  background: blueviolet;
}