Vue中v-for的数据分组实例


Posted in Javascript onMarch 07, 2018

使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组。

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta charset="utf-8" />
 <script src="Scripts/vue.js"></script>
</head>
<body>
 <!--这是我们的View-->
 <div id="app">
  <table>
   <tbody>
    <tr v-for="(row,i) in listTemp">
     <td v-for="(cell,j) in row">
      <div :id="'T_'+(i*3+j)">Data-{{cell}}</div>
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>
<script src="Scripts/vue.js"></script>
<script>
 // 创建一个 Vue 实例或 "ViewModel"
 // 它连接 View 与 Model
 new Vue({
  el: '#app',
  data: {
   list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  },
  computed: {
   listTemp: function () {
    var list = this.list;
    var arrTemp = [];
    var index = 0;
    var sectionCount = 3;
    for (var i = 0; i < list.length; i++) {
     index = parseInt(i / sectionCount);
     if (arrTemp.length <= index) {
      arrTemp.push([]);
     }
     arrTemp[index].push(list[i]);
    }
    return arrTemp;
   }
  },
 })
</script>

在computed中以3个元素为一组来动态分组,在绑定数据的地方使用嵌套的v-for循环,结果如下图(3列4行)

Vue中v-for的数据分组实例

这里还对包裹数据的每个div的id作了特别的处理,动态产生id,每个id都有一个字符串前缀T,后面是数据的索引,索引采用i*3+j计算获得,以便于对应到原始的数据list。

Vue中v-for的数据分组实例

以上这篇Vue中v-for的数据分组实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
You might like
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python db类用法说明
2020/07/07 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
网络工程师职业规划
2014/02/10 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
导游词之山西关帝庙
2019/11/01 职场文书