vue双重循环，点击第一层的某个li，其二层对应的子元素隐藏或显示

前端小白记录

已于 2022-03-23 09:53:12 修改

阅读量880

点赞数

文章标签： vue js 前端

于 2022-03-21 09:41:28 首次发布

本文链接：https://blog.csdn.net/m0_50981596/article/details/123627179

版权

这篇文章介绍了如何在 Vue 组件中使用指令遍历 items 数组，并通过 v-if 条件语句根据 isshow 属性动态显示或隐藏列表项。点击事件 handle() 方法实现了单个元素状态的切换。

摘要由CSDN通过智能技术生成

代码
.vue文件

<ul >
  <li v-for="i in items" @click="handle(i)">
    <span v-if=‘item.isshow‘>{{i.name}}</span>
  </li>
</ul>
.js文件
  data: function() {
    return {
      items: [{
       name:"zhang",
        isshow: true
      }, {
        name:"san",
        isshow: true
      }]
    }
  },
  methods: {
    handle: function(i) {
            i.isshow = !i.isshow;
    }
  }