<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】

Logo

前往低代码交流专区

更多推荐