效果如下:
HTML:
<div class="list" v-for="(item,value) in list" :key="value" @click="clikfun(item)">
{{item.val}}{{item.bool}}
<div class="height0" :class="item.bool?'height1':''" v-for="(item1,value1) in item.arr" :key="value1">
{{item1.name}}{{item1.age}}
</div>
</div>
css:
<style scoped>
.list{
background-color: #ccc;
margin-top:10px;
}
.height0{
display: none;
}
.height1{
display:block;
}
</style>
js:
data(){
return{
list:[
{
id:1,
val:"小明",
bool:false,
arr:[
{
name:"jack",
age:18
},
{
name:"jack",
age:18
}
]
},
{
id:2,
val:"小明",
bool:false,
arr:[
{
name:"jack",
age:18
},
{
name:"jack",
age:18
}
]
},
{
id:3,
val:"小明",
bool:false,
arr:[
{
name:"jack",
age:18
},
{
name:"jack",
age:18
}
]
},{
id:4,
val:"小明",
bool:false,
arr:[
{
name:"jack",
age:18
},
{
name:"jack",
age:18
}
]
}
]
}
},
methods:{
clikfun(val){
for(let i=0;i<this.list.length;i++){
if(val.id==this.list[i].id){
this.list[i].bool=!this.list[i].bool
}
else{
this.list[i].bool=false
}
}
}
},