vue小圆图遍历换行并只显示前9个

先看效果

记得带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>