.listTitle{width: 7.5rem;height: 1rem;margin: auto;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;}
.listContent{background: #eee;height: 1rem;}
<div id="demo">
<div v-for="(item,index) in data_list" @click="isShow(index)">
<div class="listTitle">
<p>{{item.title}}</p>
<p>></p>
</div>
<div class="listContent" v-if="idx==index">{{item.content}}</div>
</div>
</div>
new Vue({
el:"#demo",
data(){
return{
data_list:[
{
title:"苹果",
content:"这是一个很甜的苹果"
},
{
title:"西瓜",
content:"这是一个很甜的西瓜"
},
{
title:"哈密瓜",
content:"这是一个很甜的哈密瓜"
},
],
is_show:false,
idx:-1
}
},
methods:{
isShow(index){
console.log(index)
// this.idx=index //这种情况点击后显示内容,再次点击不起作用
this.idx=this.idx==index?-1:index //这种情况点击后显示内容,再次点击隐藏
}
},
created(){
},
mounted(){
}
})