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】