vue选项卡切换简单方法

image.png

具体思路，蓝色框内是：
众多li元素，每个li绑定同一个方法并传入Id，每次点击根据id，请求数据，然后塞入list变量内，下方红色框通过循环list数组渲染数据。
li通过show变量，使用三元运算符，来动态给当前点击的li元素增加背景色，达到切换视觉效果
本质还是数据替换
:class="{active:activeindex===index}"//这种写法也可

<ul>
    <li @click="getlist(1)" :class=" show==1? ‘color’：‘’ "></li>
    <li @click="getlist(2)"  :class=" show==2? ‘color’：‘’ "></li>
    <li @click="getlist(2)"  :class=" show==3? ‘color’：‘’ "></li>
</ul>
<div>
      <div v-for="(item,index) in list " :key="index"> {{item}} </div>
</div>

data(){
 return{
      list:[1,2,3]，
  show:'1'
        }
},
methods:{
  getlist(id){
//把当前点击的li元素的id付给show，
this.show=id
  //通过id，调用axios请求获得数据后，付给list变量
        }
}