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跨域总结
Aug 30 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 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基本函数汇总
2015/07/09 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python删除本地夹里重复文件的方法
2020/11/19 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python pycharm的安装及其使用
2019/10/11 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python中的逆序遍历实例
2019/12/25 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
七年级数学教学反思
2014/01/22 职场文书
动员大会主持词
2014/03/20 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
见习报告的格式
2014/10/31 职场文书
药店营业员岗位职责
2015/04/14 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP