vue v-for 循环，根据后端返回的数据等间距显示在页面_Stephanie翟的博客-程序员秘密

技术标签： # VUE

（一）项目需求+效果图

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

在这里插入图片描述

本文链接：https://blog.csdn.net/a954553391/article/details/103586827

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

android 关机闹钟_andorid 关机闹铃 ioctl代码实现_shangyaowei的博客-程序员秘密

新项目的手机需要实现关机状态下的闹钟，早在刚开始接触 android 的时候都在想为什么 android不支持关机状态下的一些功能呢？像充电或者闹钟什么的，虽然每个平台的驱动不一样但上层应用是可以提供统一接口的呀，果然在 4.0的时候支持关机充电了，关机闹钟仍然不在默认支持中。市场上的很多品牌手机也都不支持这个功能，让很多用惯了Feature Phone 以及担心辐射的用户都不习惯。这次做关

使用WeTest压测大师进行API/CGI压测_zdj1414的博客-程序员秘密

压测的API有三条：1）Get VersionAPI：http://xxxx/get_versionResponse: {"ret":0,"version":"1.0.7"}2）LoginAPI：http://xxxx/loginRequest: { "openid": "6282c0d2016e05f26130007969ef8f2f", "access_token":

《System语言详解》——1.SystemTap概述_systemstap 字符串长度_海枫的博客-程序员秘密

英文原文：http://sourceware.org/systemtap/langref/SystemTap_overview.html1 SystemTap概述1.1关于本书本书是SystemTap语言结构和语法的综合参考书，大量引用现有的SystemTap手册和指南文档。读者只要阅读本书，就可从中掌握SysemTap语言的语法和建议性用法。为确保能顺利阅读本书，读者需要

Windows Embedded Compact 2013 介绍及安装_bluesea725的博客-程序员秘密

微软于2013年6月份推出WindowsEmbeddedCompact2013 版本的嵌入式系统，其支持x86和ARM架构的处理器。专为构建小型化、实时性等特殊需求的行业设备而优化，支持VS2012等开发工具，扩展了Windows的用户体验，将更好的帮助企业构建基于物联网应用的行业设备及系统。面向行业应用Windows Embedded Compact 2013 是应用于小型化、嵌入式行业

3. Longest Substring Without Repeating Characters [LeetCode]_lxwmary的博客-程序员秘密

算法第三题，求最长不重复子串。left代表子串开始的位置，lastpos数组编号代表每个ASCII码，值记录上次出现这个ASCII码的字符的位置。从左到右扫描字符串，如果当前字符没有出现过，记录此字符在字符串中的位置；如果出现过，更新left值，并记录字符出现的新位置。每次扫描计算当前子串长度cur，取最大值。class Solution { public int lengthO...

MATLAB中神经网络train函数使用说明_matlab train函数_飞天长虹的博客-程序员秘密

MATLAB中神经网络train()函数使用说明

随便推点

用Scala瞎写的直接插入排序算法_netHibernate的博客-程序员秘密

继续用Scala瞎写，这次写的是直接插入排序算法。（插入算法有很多种，直接插入算法是其中一种，其它的还有二分插入，链表插入等） 直接插入排序的基本概念 直接插入排序的概念是通过构建有序的序列，对于未排序的数据，在已排序的序列中从后向前扫描，找到相应位置并插入。 拿数组来说 首先比较数组的头两个数，将它们变为有序的，接下来将数组的第三个数与前两个数从后向前扫描，把第三个数插入到有序的序列中，再处理第四个数，一直到完。 把它写出来 根

代价函数、目标函数、损失函数_自动超参数代价函数误差函数_My.科研小菜鸡的博客-程序员秘密

Q：为什么会提及关于代价函数的理解？A：在 ML 中线性回归、逻辑回归等总都是绕不开代价函数。理解代价函数：是什么？作用原理？为什么代价函数是这个？代价函数就是用于找到最优解的目的函数，这也是代价函数的作用。对于回归问题，我们需要求出代价函数来求解最优解，常用的是平方误差代价函数。比如，对于下面的假设函数:里面有 θ0 和 θ1 两个参数，参数的改变将会导致假设函数的变化，比如：　现实的例子中，数据会以很多点的形式给我们，我们想要解决回归问题，就需要将这些点拟合成一条直线，找到最优的 θ0 和 θ