思路:vue中控制v-for循环出来的某一个列表项的显示隐藏切换

第一种方法:通过给每条数据添加字段的方法

给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去

在methods里面写点击事件:

首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。

this.$set(你要添加数据的数组或对象, '字段名称', 字段值)

最后通过v-show控制代码块的显示隐藏

 

第二种方法:在data里面设置一个属性

在data里面设置一个属性thisIndex,给一个初始值为-1或者null:

写点击事件的时候,将当前项的下标作为参数传过去:

在点击事件中,当thisIndex为空时则将当前项的下标赋值给它,当不为空时则将thisIndex清空即可:

但是这种方法有个bug,只能控制一个元素的显示隐藏,thisIndex毕竟还是全局的,当要同时展开两个时就会出问题,所以最好还是使用第一种给数据加字段的方法。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue的v-for指令可以用于循环渲染列表数据,而分页是一种将大量数据分割成多个页面展示的方式。结合v-for和分页可以实现在Vue展示分页列表。 首先,你需要有一个包含所有数据的数组,然后使用v-for指令循环遍历数组,并将每个元素渲染到页面上。接下来,你可以使用分页算法将数据分割成多个页面,并根据当前页码来显示对应的数据。 以下是一个简单的示例代码,演示了如何在Vue使用v-for和分页来展示数据: ```html <template> <div> <ul> <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li> </ul> <div> <button @click="previousPage">上一页</button> <span>{{ currentPage }}</span> <button @click="nextPage">下一页</button> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, // 更多数据... ], pageSize: 5, // 每页显示的数据数量 currentPage: 1, // 当前页码 }; }, computed: { currentPageData() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.items.slice(startIndex, endIndex); }, }, methods: { previousPage() { if (this.currentPage > 1) { this.currentPage--; } }, nextPage() { const totalPages = Math.ceil(this.items.length / this.pageSize); if (this.currentPage < totalPages) { this.currentPage++; } }, }, }; </script> ``` 在上面的代码,我们使用了一个`items`数组来存储所有的数据。通过计算属性`currentPageData`,我们根据当前页码和每页显示的数据数量来计算出当前页应该显示的数据。然后,我们在模板使用v-for指令循环遍历`currentPageData`数组,并将每个元素渲染列表。 同时,我们还添加了两个按钮和一个显示当前页码的span元素,用于切换上一页和下一页,并显示当前页码。通过点击按钮,我们可以更新`currentPage`的值,从而切换到上一页或下一页的数据。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值