vue中点击展示数组里的对象、数组对象单个展示
今天朋友碰见一个需求,就是后端接口返回一个数组,刚开始只展示数组中第一个对象,然后点击对象中的某个按钮会展示数组第二个对象,以此类推。
自己写了个数组
我的思路呢就是在页面初始化展示的时候,把请求回来的数组下标为1的数组对象push进一个新数组
这个this.j是我在data里声明的一个变量,这样的话在展示这个数组的时候就会只展示第一个
他们的业务是点击data里面的list里的某个对象然后触发data这个数组的下个对象
给需要点击的添加点击事件
我这里只是做个演示,正常情况下使用v-if进行判断的,stutas=1时代表的是为选中状态也就第二个对象展示的样式,0代表的就是第一个已经选中的
这里就是实现这个功能最主要的部分
下面是完整的代码,可以开个新页面看下效果
<template>
<div>
<div class="app">
<div v-for="(item, index) in list" :key="index">
<div class="list">
<span>{{ item.name }}</span>
<span
v-show="item.stutas == 1"
id="name"
v-for="(i, y) in item.list"
:key="y"
@click="buttonClick(i)"
>
{{ i.name }}
</span>
<span
v-show="item.stutas == 0"
style="margin-left: 30px; color: red"
>{{ item.title }}</span
>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: 1,
data: [
{
stutas: 1,
id: 1,
name: "aa",
list: [
{ cid: 1, id: 1, name: "11111" },
{ cid: 1, id: 2, name: "22222" },
{ cid: 1, id: 3, name: "3333" },
],
},
{
stutas: 1,
id: 2,
name: "bb",
list: [
{ cid: 2, id: 1, name: "2222" },
{ cid: 2, id: 2, name: "1111" },
{ cid: 2, id: 3, name: "0000" },
],
},
{
stutas: 1,
id: 3,
name: "cc",
list: [
{ cid: 3, id: 1, name: "33333" },
{ cid: 3, id: 2, name: "22222" },
{ cid: 3, id: 3, name: "0000" },
],
},
{
id: 4,
stutas: 1,
name: "dd",
list: [
{ cid: 4, id: 1, name: "11111" },
{ cid: 4, id: 2, name: "22222" },
{ cid: 4, id: 3, name: "3333" },
],
},
],
j: 0,
list: [],
};
},
mounted() {
this.index();
},
methods: {
index() {
this.list.push(this.data[this.j]);
},
buttonClick(i) {
let list = this.list;
for (let index = 0; index < list.length; index++) {
if (list[index].id == i.cid) {
list[index].title = i.name;
this.data[this.j].stutas = 0;
this.j++;
}
}
this.click();
},
click() {
if (this.list.length < this.data.length) {
this.list.push(this.data[this.j]);
}
},
},
};
</script>
<style lang="less" scoped>
.app {
width: 100%;
height: 500px;
background-color: blue;
.list {
width: 50%;
margin: 30px auto;
color: #ffffff;
font-size: 24px;
#name {
margin: 0 30px;
}
}
}
</style>