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

后台跳转页面携带参数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说明是指:除第一条数据以外的其他数据)即可完成此需求。

posted @   Evident  阅读(473)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示