使用Vue中 v-for循环列表,控制按钮隐藏显示

v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。
- 实现效果如图
这里写图片描述

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

  • 返回的数据类型
    这里写图片描述

  • 前端页面代码

<div class="leftProcessBox">
     <div class="leftProcess" v-for="(listLZPar,index) in listLZParams" v-show="listLZPar.operate_type!=''">
         <div class="process">
             <div class="processPointLine">
                 <div class="processPoint">
                     <i class="ico iconfont icon-circleyuanquan iconCircle " v-show="index==0"></i>
                     <i class="ico iconfont icon-yuan iconCircle" v-show="index!=0"></i>
                     <div class="characterInfo">{{listLZPar.operate_type | operatertypeToName}}</div>
                 </div>
                 <div class="processLine" v-show="!(index == listLZParams.length-1)">
                 </div>
             </div>
         </div>
     </div>
 </div>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值