vue.js基于v-for实现批量渲染 Json数组对象列表数据示例


Posted in Javascript onAugust 03, 2019

本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据。分享给大家供大家参考,具体如下:

Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下:

<div v-for="(item,index) in items">
  <div v-for="(list,index) in item.lists"></div>
<div>

假设当前的HTML,VUE 文本格式如下:

<div id="app" class="columns">
  <div class="column">
    <div class="card">
      <div class="card-content">
        <div id="data" class="columns is-multiline ">
          <div class="column is-half">
            <div class="media">
              <div class="media-content">
                <p class="has-text-weight-bold">职业知识</p>
                <p class="help">生涯树提供的职业数据框架,可以从职业能力、知识、技能、活动、内容方面进行探索和规划</p>
              </div>
            </div>
            <div class="message-body">
              <div class="field buttons">
                <a>兴趣:</a>
                <span>常见的任务和环境的偏好</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

需要渲染的JSON数组对象格式如下:

var allData = [
  {
    "id":"职业知识",
    "name":"关于各行业职业信息的分析,主要因素分析",
    "lists":[
      {
        "title":"兴趣",
        "describe":"常见的任务和环境的偏好"
      },
      {
        "title":"价值观",
        "describe":"个人满意度的关键方面"
      },
      {
        "title":"技能",
        "describe":"学习发展、组织协作和资源管理的发达能力"
      }
    ]
  },
  {
    "id":"职业扩展",
    "name":"提供除本职业之外的扩展知识等各个方面",
    "lists":[
      {
        "title":"活动",
        "describe":"常见的工作行为类型"
      },
      {
        "title":"内容",
        "describe":"工作性质的物理和社会因素"
      },
      {
        "title":"能力",
        "describe":"个人基本持久属性"
      }
    ]
  }
];

使用VUE操作渲染列表,先对文本分配对应的字段值,格式如下:

<div class="column is-half" v-for="(item, index) in items">
  <div class="media">
    <div class="media-content">
      <p class="has-text-weight-bold">{{ item.id }}</p>
      <p class="help">{{ item.name }}</p>
    </div>
  </div>
  <div class="message-body" v-for="(list, index) in item.lists">
    <div class="field buttons" >
      <a>{{ list.title}}:</a>
      <span>{{ list.describe}}</span>
    </div>
  </div>
</div>

JS操作,引入 vuejs,创建实例渲染到指定对象(引入链接请移步到官网 https://cn.vuejs.org/)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var vm = new Vue({ el: '#app', data: { items:allData }})

VUE渲染列表数据完成,就是这么简单。接下来看看 原生JS 是如何渲染列表数据的:

原生JS操作数组取值:循环。使用 for in 直接操作对象,或者 for循环直接取值,格式如下:

for(var key in values){};for(var i=0;i<values.length;i++){},根据情况取任意一种方式,以为演示两种方式的使用

function Id(id) {
  return document.getElementById(id); //获取模块的ID
}
function getData(allData) {
  var data = Id("data");
  var html='';
  for(var i in allData){ //外层循环获取标志信息
    var list = '';
    for(var j=0;j<allData[i].lists.length;j++){ //内层循环渲染详细列表项
      list+='<div class="message-body">'+
          '<div class="field buttons">'+
            '<a class=" ">'+allData[i].lists[j].title+':</a>'+
            '<span>'+allData[i].lists[j].describe+'</span>'+
          '</div>'+
        '</div>';
    }
    html+='<div class="column is-half">'+
        '<div class="media">'+
          '<div class="media-content">'+
          '<p class="has-text-weight-bold">'+allData[i].id+'</p>'+
          '<p class="help">'+allData[i].name+'</p>'+
          '</div>'+
        '</div>'+list+  //将内层渲染好的列表项模块添加到外层大模块中
      '</div>';
  }
  data.innerHTML = html; //像指定的ID模块追加内容
}
//调用渲染数据方法并传递参数 JSON数组对象
getData(allData);

最终,VUE ,原生JS 渲染出来的列表数据效果均如下:

vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
小程序自定义日历效果
Dec 29 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
ES5新增数组的实现方法
May 12 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 #Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 #Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python实现简单过滤文本段的方法
2017/05/24 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python字典排序的方法
2019/10/12 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
几款好用的python工具库(小结)
2020/10/20 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
博士生入学考试推荐信
2013/11/17 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
房屋委托书范本
2014/04/04 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
党员争先创优承诺书
2015/01/20 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL