vue选项卡切换简单方法

2020-08-06  本文已影响0人  孤城致幻
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变量
        }
}
上一篇 下一篇

猜你喜欢

热点阅读