vue v-for直接迴圈數字
阿新 • • 發佈:2019-01-08
在vue中 按數字迴圈次數
html
<div class="box"> <ul class="title"> <li class="title-item" @click="toName(index)" v-for="(title, index) of listName" :class="{'title-active': index === currentIndex}" :key="index">{{title}}</li> </ul> <div class="list" ref="listBox"> <ul> <li v-for="item of list" :key="item.id" class="itemBox"> <p class="list-name">{{item.class}}</p> <ul class="item-list"> <li class="item" v-for="(data, index) of item.content" :key="index" @click="showPop(index, item.content)"> <div class="item-img"> <img :src="data.imgUrl" /> </div> <div class="item-info"> <p class="item-name">{{data.name}}</p> <div class="item-pepper"> <svg class="icon" aria-hidden="true" v-for="(pepperOn, index) of 5" :key="index"> <use v-if="index <= (data.pepper - 1)" xlink:href="#ht-icon-lajiao"></use> <use v-else xlink:href="#ht-icon-lajiao-copy"></use> </svg> </div> <div class="item-price"> <span class="item-del">¥{{data.priceDel}}</span> <span class="item-price-now">¥<span class="item-price-font">{{data.priceNow}}</span></span> </div> </div> </li> <li class="supportItem" v-if="item.content.length < 1" v-for="(suppor, index) of item.count" :key="item.class + index"></li> </ul> </li> </ul> </div> </div>
data資料結構
list: [ { id: '001', class: '招牌菜', count: 3, content: [] }, { id: '002', class: '火鍋', count: 2, content: [ { imgUrl: 'http://zxx.tianyour.com:80/image/20180515/104_1526353680561018948.jpg', name: '養顏金牛掌', pepper: 2, priceDel: '128.0', priceNow: '118.0' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180515/104_1526354055933054500.jpg', name: '舞動的粉絲', pepper: 3, priceDel: '48.0', priceNow: '42.0' } ] }, { id: '003', class: '小炒', count: 3, content: [] }, { id: '004', class: '熱菜', count: 7, content: [ { imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532592203070026641.jpg', name: '肥牛火鍋', pepper: 3, priceDel: '288.0', priceNow: '273.6' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532592094811055591.jpg', name: '湯鍋毛肚', pepper: 3, priceDel: '128.0', priceNow: '121.1' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180726/104_1532591948721020109.jpg', name: '汽鍋魚頭', pepper: 3, priceDel: '168.0', priceNow: '159.6' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172915267059080.jpg', name: '幹椒大蒜炒臘牛肉', pepper: 3, priceDel: '58.0', priceNow: '48.0' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172876440041307.jpg', name: '漢菜皮蛋湯', pepper: 0, priceDel: '22.0', priceNow: '18.0' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172813337055894.jpg', name: '小炒黑豬肉', pepper: 2, priceDel: '38.0', priceNow: '31.0' }, { imgUrl: 'http://zxx.tianyour.com:80/image/20180628/104_1530172769477074813.jpg', name: '鳳爪豬腳鉢', pepper: 2, priceDel: '78.0', priceNow: '63.0' } ] } ]
count 有幾個專案 在content 還沒有被填充的時候 先建立幾個空的li 佔位
當請求返回資料填充了content之後 佔位的 li 隱藏掉
建立佔位 li 的時候,根據數字迴圈
這時候 :key 使用index會有重複報錯
因為每個分類裡面都是使用index
這時候 :key 可以用分類名 + index 來做為:key