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实现Java的List功能(实例讲解)
Nov 07 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
css配合jquery美化 select
Nov 29 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
浅谈document.write()输出样式
May 07 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
JS代码优化的8点建议
Feb 04 Javascript
javascript实现左右缓动动画函数
Nov 25 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动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP框架性能测试报告
2016/05/08 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python制作Windows系统服务
2017/03/25 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python基于event实现线程间通信控制
2020/01/13 Python
html5 标签
2009/07/16 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
计算机学生求职信范文
2014/01/30 职场文书
个人委托书范文
2015/01/28 职场文书
2015年护士节活动总结
2015/02/10 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
Python办公自动化解决world文件批量转换
2021/09/15 Python