vue v-for 循環，根據後端返回的數據等間距顯示在頁面

（一）項目需求+效果圖

1.需求

根據後端查詢的數據，點擊搜索框，自動顯示數據，同時數據等間距。數據多時，可以自動換行。

2.效果圖：

（二）代碼+代碼解析

1.代碼：

<template>
        <van-row>
        <van-col span="8" v-for="(item, i) of processName" :key="i" justify="center"> 
          <van-cell-group v-show="isShow" >
          <van-field v-model="processName[i]"/>
          </van-cell-group>
        </van-col>
        </van-row>
</template>

<script>
export default {
  data () {
    return {
      //後端返回的detailContent存放
      processName: [],
      //默認不顯示
      isShow:false
    }
  },
 methods: {
     test(){          
      var vm = this;
      // 調用後端查詢的地址
      var url = process.env.VUE_APP_BACKEND_URL + "/groupProcess/secondProcess/11";
      // 後端地址爲get請求
      this.$axios.get(url).then((response) => {  
          for (let index = 0; index < response.data.data.length; index++) {
          	 //循環數組裏的值
             vm.processName.push(response.data.data[index].processName);
          }     
          //如果流程名稱有值，則顯示      
          if(vm.processName){           
            vm.isShow=true; 
          }            
        }, (error) => {
          //發生錯誤時，輸出錯誤信息
            console.log(error);               
        });
         
     }    
  },
};
</script>

2.代碼解析