宝哥软件园

使用某视频剪辑软件中迭代循环列表控制按钮隐藏显示功能

编辑:宝哥软件园 来源:互联网 时间:2021-08-25

迭代可以把数据中的一个数组对应为一组元素

迭代指令需要以项目中的项目形式的特殊语法,项目是源数据数组并且项目是数组元素迭代的别名。

-实现效果如图

这里写图片描述

需求描述:

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

返回的数据类型

这里写图片描述

前端页面代码

div class=' leftProcessBox ' div class=' leftProcess ' v-for='(listLZPar,index)在listlzprams ' v-show=' listLZPar。oper _ type!=' ' ' div class=' process ' div class=' processPointLine ' div class=' processPoint ' I class=' ico图标字体图标-circleyuanquan图标圆' v-show=' index=' 0 '/I class=' ico图标字体图标-元图标圆' v-show=' index!=0 '/I div class=' terminnfo " { listlspar。oper _ type | operatitypename } }/div/div class='流程行' v-show='!(index==listlzprams。长度-1)'/div/div/div PS:vue里面如何让迭代循环出来的列表里面的列表点击事件只对当前列表有效

Li @ click=“显示”span 1/span/Lili @ click=“显示”span 1/span/Lili @ click=“显示”span 1/span/Lili点击只让当前的里下面的跨度隐藏

方法一:用某视频剪辑软件就尽量遵从数据驱动的想法,实现这个的方法很多,但是尽量不要直接去操作多姆。

div id=' app ' ul Li v-for=' list in list ' @ click=' show($ index)' span v-show=' $ index!==I " { list } }/span/Li/ul/divscriptnew Vue({ El : ' # app },数据: { list 3360[1,1,1],i: -1 },方法: { show(index){ this。I=index } } })/script方法2:

ul id=' app ' Li v-for=' items in items ' @ click=' toggle(item)' span v-if=' item。显示“{ item。content } }/span/Li/lanew Vue({ El : ' # app ',data : function(){ return { items :[{ content : ' 1 items ',show: true },{ content : ' 2 items ',show 33: true },{ content :项目。展示;} }})总结

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

更多资讯
游戏推荐
更多+