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.代码解析