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':''"&a
·
<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>
<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】
更多推荐
已为社区贡献4条内容
所有评论(0)