vue 循环点击显示_使用Vue中 v-for循环列表控制按钮隐藏显示功能

摘要:这篇Vue栏目下的“使用Vue中 v-for循环列表控制按钮隐藏显示功能”,介绍的技术点是“v-for循环、按钮隐藏显示、v-for、for循环、循环列表、控制按钮”,希望对大家开发技术学习和问题解决有帮助。

v-for可以把数据中的一个数组对应为一组元素

v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

- 实现效果如图

需求描述:

第一个显示蓝色按钮,代表数据最终状态;其余按钮为灰色,显示数据流转记录。

返回的数据类型

前端页面代码

{{listLZPar.operate_type | operatertypeToName}}

PS:vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

1

1

1

li点击只让当前的 li 下面的span 隐藏

方法一:用vue就尽量遵从数据驱动的想法,实现这个的方法很多,但是尽量不要直接去操作dom。

  • {{ list }}

new Vue({

el: '#app',

data: {

lists: [1, 1, 1],

i: -1

},

methods: {

show (index) {

this.i = index

}

}

})

方法2:

  • {{item.content}}

new Vue({

el: '#app',

data: function() {

return {

items: [{

content: '1 item',

show: true

}, {

content: '2 item',

show: true

}, {

content: '3 item',

show: true

}]

}

},

methods: {

toggle: function(item) {

item.show = !item.show;

}

}

})

总结

以上所述是小编给大家介绍的使用Vue中 v-for循环列表控制按钮隐藏显示功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

月生南浦

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值