vue v-for 迴圈(一行顯示四個,每一行的最右邊那個計算屬性)
阿新 • • 發佈:2019-02-02
<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】