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

v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。
- 实现效果如图
使用Vue中 v-for循环列表,控制按钮隐藏显示_第1张图片

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

  • 返回的数据类型
    使用Vue中 v-for循环列表,控制按钮隐藏显示_第2张图片

  • 前端页面代码

<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">
                     class="ico iconfont icon-circleyuanquan iconCircle " v-show="index==0">
                     class="ico iconfont icon-yuan iconCircle" v-show="index!=0">
                     <div class="characterInfo">{{listLZPar.operate_type | operatertypeToName}}div>
                 div>
                 <div class="processLine" v-show="!(index == listLZParams.length-1)">
                 div>
             div>
         div>
     div>
 div>

你可能感兴趣的:(Vue)