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

v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。- 实现效果如图需求描述：第一个显示蓝色按钮，代表数据最终状态；其余按钮为灰色，显示数据流转记录。返回的数据类型前端页面代码<div class="leftProcessBox...

xiongdaandxiaomi

22194人浏览 · 2018-08-30 19:06:52

xiongdaandxiaomi · 2018-08-30 19:06:52 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^