vue中点击展示数组里的对象、数组对象单个展示

今天朋友碰见一个需求,就是后端接口返回一个数组,刚开始只展示数组中第一个对象,然后点击对象中的某个按钮会展示数组第二个对象,以此类推。

vue中点击展示数组里的对象、数组对象单个展示_第1张图片

 自己写了个数组

我的思路呢就是在页面初始化展示的时候,把请求回来的数组下标为1的数组对象push进一个新数组

vue中点击展示数组里的对象、数组对象单个展示_第2张图片

 

 这个this.j是我在data里声明的一个变量,这样的话在展示这个数组的时候就会只展示第一个

他们的业务是点击data里面的list里的某个对象然后触发data这个数组的下个对象

给需要点击的添加点击事件

vue中点击展示数组里的对象、数组对象单个展示_第3张图片

 

 我这里只是做个演示,正常情况下使用v-if进行判断的,stutas=1时代表的是为选中状态也就第二个对象展示的样式,0代表的就是第一个已经选中的

vue中点击展示数组里的对象、数组对象单个展示_第4张图片

 这里就是实现这个功能最主要的部分

vue中点击展示数组里的对象、数组对象单个展示_第5张图片

下面是完整的代码,可以开个新页面看下效果






你可能感兴趣的:(前端,vue.js,javascript,数据结构)