先看效果
记得带key,虽然提升不大,但是至少警告栏少了
<template>
<div class="service-class p30">
<div class="sc-list">
<div class="sc-item" v-for="(img,index) in images" :key="img.id" v-if='index<9'>
<img class="img" v-bind:src="img.goodsImage"/>
<div class="text">{{ img.goodsCategoryName }}</div>
</div>
<div class="sc-item">
<img class="img" src='http://img.tiantue.com:8080/images/2019-03-21/d78136c646564922b2e6164cd501e8ec1553155222132.png'/>
<div class="font12 color-363636">全部分类</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Ico',
data () {
return {
images: [{id: 1, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 2, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 3, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 4, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 5, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 6, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 7, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 8, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 9, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 10, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 11, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 12, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'},
{id: 13, goodsImage: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png', goodsCategoryName: '家政服务'}]
}
}
}
</script>
<style scoped>
.sc-item{
width: 20%;
text-align: center;
margin-bottom: 10px;
float: left;
}
.img{
width: 70%;
height: 70%;
margin-bottom: 10px;
}
.service-class{
background: #ffffff;
margin-top: 10px;
padding-bottom: 0;
}
.sc-list{
flex-wrap: wrap;
justify-content: space-between;
}
</style>