vue for循环 一行放5个数据 外层使用flex布局

html：

<template v-for="(item, i) in aa" >
    <div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" >
        <div style="width: 19%;display: flex;justify-content: flex-start;align-items: baseline;" v-for="(item, i) in shuzu(aa,i)">
            <span style="font-size: 0.8rem;width:55%;text-align: center">{{ item.bb }}</span>
            <div class="form-group" style="width:45%">
                <input class="form-control form-control-sm" type="text" placeholder="2日" disabled>
             </div>
          </div>
    </div>          
</template>

JS：

<script>
export default {
  data () {
    return {
      aa:[
        {bb:'AA'},
        {bb:'BB'},
        {bb:'CC'},
        {bb:'DD'},
        {bb:'EE'},
        {bb:'FF'},
        {bb:'HH'},
        {bb:'II'},
        {bb:'GG'},
        {bb:'KK'},
        {bb:'LL'},
      ],
    }
  },
  methods:{
    shuzu(items,i){
      let arryy = [];
      let oldarr = items;
      for(let y = i; y < oldarr.length; y++) {
        if (arryy.length < 5) {
          arryy.push(items[y]);
        } else {
          break;
        }
      }
      return arryy;
    }
  }
}
</script>