關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)
下面一段代碼給大家介紹vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)，具體代碼如下所示：
<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的倍數(shù)項），需要顯示hr，對于這些值，(index + 1) % 4為0，所以(index + 1) % 4==0為每一行的最后一個元素，顯示hr?！具@里index按順序從0開始計數(shù)，所以index + 1為表示當(dāng)前site在sites數(shù)組中是第幾個，然后(index + 1) % 4，每滿4，順序數(shù)除以4余數(shù)都為0】
補充：下面看下vue規(guī)定v-for循環(huán)的次數(shù)
html:
<p v-for="(lab,index) in card.label" v-if='index<=1'></p>
控制for 循環(huán)的次數(shù)為兩次
總結(jié)
以上所述是小編給大家介紹的關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了如何搭建一個完整的Vue3.0+ts的項目步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vuex中this.$store.commit和this.$store.dispatch的基本用法實例
在vue的項目里常常會遇到父子組件間需要進行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue 中使用vue2-highcharts實現(xiàn)曲線數(shù)據(jù)展示的方法
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)曲線數(shù)據(jù)展示的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)全局組件自動注冊，無需再單獨引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3的setup語法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語法如何自定義v-model為公用hooks，文章分為兩個部分介紹，簡單介紹vue3的setup語法如何自定義v-model和如何提取v-model語法作為一個公用hooks2022-07-07
Vue.js 是一套構(gòu)建用戶界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫或既有項目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07
本篇文章主要介紹了vue 1.x 交互實現(xiàn)仿百度下拉列表示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了如何使用?vue3?指令封裝一個后臺管理系統(tǒng)圖片預(yù)覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-09-09