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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
Javascript中的arguments对象
Jun 20 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 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连接MongoDB示例代码
2012/09/06 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
smarty中常用方法实例总结
2015/08/07 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js获取视频时长代码
2014/04/10 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中as用法实例分析
2015/04/30 Python
python正则实现提取电话功能
2018/02/24 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
银行内勤岗位职责
2014/04/09 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
坎儿井导游词
2015/02/09 职场文书