版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33737087/article/details/85158889
在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