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 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js获取 type=radio 值的方法
May 09 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
在Vue中使用Compass的方法
Mar 02 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
jquery随机展示头像代码
2011/12/21 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
浅谈Python的异常处理
2016/06/19 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python接口开发实现步骤详解
2020/04/26 Python
keras.layer.input()用法说明
2020/06/16 Python
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
先进事迹报告会感言
2014/01/24 职场文书
《社戏》教学反思
2014/04/15 职场文书
干部鉴定材料
2014/05/18 职场文书
大学课外活动总结
2014/07/09 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014年副班长工作总结
2014/12/10 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年科协工作总结
2015/05/19 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers