时间:2021-05-25
下面一段代码给大家介绍vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),具体代码如下所示:
<div class="imglist-item" v-for="(items,key) in imgmaterialdialog.imglist" @click="selectimg(items,key)" :class="(key + 1) % 4==0?'imglist-noright':''"> <img :src="items.tempMaterialUrl" alt="" /><div class="layer" v-bind:class="{showorhide:key==currents}"> <i class="el-icon-check"></i></div> <p class="img-name">{{items.filename}}</p></div>每一个imglist-item都有margin-right:10px,用绑定class的方法来控制每一行的最后一个没有边距。
这里用到了v-bind:class。其中对于index值为3(第四项),7(第八项),11(第十二项)... (4的倍数项),需要显示hr,对于这些值,(index + 1) % 4为0,所以(index + 1) % 4==0为每一行的最后一个元素,显示hr。【这里index按顺序从0开始计数,所以index + 1为表示当前site在sites数组中是第几个,然后(index + 1) % 4,每满4,顺序数除以4余数都为0】
补充:下面看下vue规定v-for循环的次数
html:
<p v-for="(lab,index) in card.label" v-if='index<=1'></p>控制for 循环的次数为两次
总结
以上所述是小编给大家介绍的关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1)将每一行的索引插入操作行中,即为每一行数据添加一个属性index使用el-table已经给处的方法:tableRowClassNamehtml中:js中:只
复制代码代码如下:@echooff::每6行拼接为一行,剩余的不够6行的显示在最后一行::::setnum=0setlocalenabledelayedexpa
比如我有一块要显示这样的新闻标题,有的一行一个标题,有的一行两个标题,还有一行三个标题,而且要自定义标题的颜色,样式等,如果写到循环里面,你想想,是不是非常麻烦
用于建立新的一行且增加的四个文本框为空的且被禁用用户ID用户ID用户名性别年龄添加删除岁设计要求1.当用户点击"增加一行",Table就增加一个Tr(包括四个文
一、需求:有这么一张表前四个属性当作联合主键需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时