v-for循环里面的点击事件控制div的显示与隐藏

最新推荐文章于 2024-03-18 18:44:23 发布

原创最新推荐文章于 2024-03-18 18:44:23 发布 · 759 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端 #vue.js

本文介绍了如何在Vue.js中使用v-for循环结合点击事件，通过为每个循环项设置自定义参数flag，动态控制div的显示与隐藏。通过在div上设置条件判断，实现点击事件的有效控制。

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>