首页 > 其他分享 >前后端不分离的项目中使用jq动态遍历数组渲染页面,显示从第2条数据开始渲染

前后端不分离的项目中使用jq动态遍历数组渲染页面,显示从第2条数据开始渲染

时间:2022-11-09 18:02:54浏览次数:39  
标签:遍历 name 渲染 process age jq 数组 页面

后台跳转页面携带参数processVos为数组,具体内容为:

    var processVos = [
      { id: 11, name: "test1", age: 21 },
      { id: 12, name: "test2", age: 22 },
      { id: 13, name: "test3", age: 23 }
    ]

html页面中遍历内容:需求为默认显示最新一条数据颜色为砖红色,其他为军校蓝。

  <div>
    <!-- 默认显示最新一条 -->
    <#list processVos[0] as process>
      <div class="track1">
        <ul>
          <li>
            <span>处理人:{{process.name}}</span>
            <span>年龄:{{process.age}}</span>
          </li>
        </ul>
      </div>
    </#list>
    <!-- 从第二条开始遍历 -->
    <#list processVos as process>
      <#if process_index !=0>
        <div class="track2">
          <ul>
            <li>
              <span>处理人:{{process.name}}</span>
              <span>年龄:{{process.age}}</span>
            </li>
          </ul>
        </div>
      </#if>
    </#list>
  </div>
<style>
  .track1 {     color:brown;   }   .track2 {     color: cadetblue;   }

</style>

注意:主要用到<#list>标签遍历数组,用到<#if>根据数组的下标进行判断(下标不是0说明是指:除第一条数据以外的其他数据)即可完成此需求。

标签:遍历,name,渲染,process,age,jq,数组,页面
From: https://www.cnblogs.com/evident/p/16874680.html

相关文章

  • Net6 反射反射程序员的快乐/遍历属性、字段、构造方法、函数及相关操作
    十年河东,十年河西,莫欺少年穷学无止境,精益求精反射反射,程序员的快乐,利用反射可以获取到私有属性及其值 在C#中反射无处不在,用好反射,就可以为所欲为有这么一个学生类:......
  • JAVA遍历Map所有元素
    //JDK1.5Mapmap=newHashMap();for(Objectobj:map.keySet()){Objectkey=obj;Objectvalue=map.get(obj);}123456//JDK1.4......
  • 二叉树的遍历
    二叉树的遍历二叉树的遍历有:前序/中序/后序的递归结构遍历:1.前序遍历(PreorderTraversal亦称先序遍历)——访问根结点的操作发生在遍历其左右子树之前。2.中序遍历(......
  • HRM平台 - 组织结构的渲染
    组织结构是一个公司的灵魂,多使用树型结构;页面格式:  渲染头部:  头部代码:<template><el-rowtype="flex"justify="space-around"style="he......
  • day28 jQuery
    概述:jQuery是一个轻量级的js库,它将js的功能进行了封装(所有的内容都是函数),它在封装的基础上做了进一步的兼容(兼容性好)特点:(优势)可链式调用(里......
  • 循环遍历DataGridView各行某列数据
    循环遍历DataGridView各行某列数据如此做foreach(DataGridViewRowdgrindataGridView1.Rows){if(dgr.Cells["Column1"].Value==null){break;}......
  • 12个方便易用的jquery表单验证插件
    绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否......
  • jquery实现简单富文本编辑
      <script>$("#under").click(function(){varsec=getSelection()if(sec==undefined){return;......
  • vue源码中的渲染过程是怎样的
    4.1VirtualDOM4.1.1浏览器的渲染流程当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度,它首先会将html文件解析成一个DOM树,与此......
  • 数据结构 玩转数据结构 6-10 二分搜索树的层序遍历
    0课程地址https://coding.imooc.com/lesson/207.html#mid=13471 1重点关注1.1队列实现层序遍历定义和应用场景定义:由上到下,一层层遍历,又称......