全国服务热线:4008-888-888

技术知识

抽奖小程序怎么做_使用Vue中 v

使用Vue中 v-for循环列表控制按钮隐藏显示功能       这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下

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

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

- 实现效果如图

需求描述:

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

返回的数据类型

前端页面代码

 div 
 div v-for="(listLZPar,index) in listLZParams" v-show="listLZPar.operate_type!=''" 
 div 
 div 
 div 
 i v-show="index==0" /i 
 i v-show="index!=0" /i 
 div {{listLZPar.operate_type | operatertypeToName}} /div 
 /div 
 div v-show="!(index == listLZParams.length-1)" 
 /div 
 /div 
 /div 
 /div 
 /div 

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

 li @click="show" 
 span 1 /span 
 /li 
 li @click="show" 
 span 1 /span 
 /li 
 li @click="show" 
 span 1 /span 
 /li 

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

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

 div id="app" 
 li v-for="list in lists" @click="show($index)" 
 span v-show="$index !== i" {{ list }} /span 
 /li 
 /ul 
 /div 
 script 
new Vue({
 el: '#app',
 data: {
 lists: [1, 1, 1],
 i: -1 
 methods: {
 show (index) {
 this.i = index
 /script 

方法2:

 ul id="app" 
 li v-for='item in items' @click="toggle(item)" 
 span v-if='item.show' {{item.content}} /span 
 /li 
 /ul 

总结

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服