1、在页面写好循环和点击事件（点击事件带上参数index）
<template>
<div v-for="(item,index) in List" :key="index">
<div @click="change(index)">{{ item.name }}</div>
<div>{{ item.age }}</div>
</div>
</template>
2、给从后台获取的数据添加一个自定义参数 flag
// 网络请求方法
async getuserList() {
const res = await this.$http.get('')
if (res.status == 200) {
res.data.list.forEach((item) => {
item.flag = false
res.data.list.push(item)
})
}
},
根据自定义的参数状态来控制div的显示与隐藏
// 点击事件
change(index) {
if(this.list[index].flag == false) {
this.list[index].flag = true
} else {
this.list[index].flag = false
}
}
4、在div上写上判断条件
<template>
<div v-for="(item,index) in List" :key="index">
<div @click="change(index)">{{ item.name }}</div>
<div v-if="item.flag== true">{{ item.age }}</div>
</div>
</template>
保证有效，亲测有效
文章来源地址https://www.toymoban.com/news/detail-458105.html
文章来源：https://www.toymoban.com/news/detail-458105.html
到了这里，关于v-for循环里面的点击事件控制div的显示与隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
