Vue中v-for的数据分组

使用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 与 Modelnew 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行)

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

转载请注明出处

Vue中v-for的数据分组相关推荐

vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据需要引用vue-resource 安装 ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
vue中data里面的数据相互使用
今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片: 我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法 ...
Vue中关于[__ob__:Observer]数据问题
[ob: Observer]=> 这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的. 操作数据的过程中不要删除这些属性: 因为你已经将数据绑定在了vue之中,vue就肯定要为数据添 ...
第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击
前言:在大屏项目中需要滚动展示某个列表信息,并且能够悬浮鼠标停止滚动.可点击最后一列查看详情.鼠标移走后又正常的滚动和动态能更新新数据. 效果图: 使用方法也很简单,下面直接看下用法吧~~~ 1. ...
vue中的v-model绑定数据深层次问题
vue有些赋值方式是非响应式的,页面不会刷新,可以参考下面(百度参考): Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = new ...
解决Vue中Object.assign清空数据的报错
想清空Vue中的data数据报错也许是没有改变this指向的原因可以试着用call等方便改变this指向例如 Object.assign(this.$data, this.$options.data. ...

Vue中v-for的数据分组

Vue中v-for的数据分组相关推荐

最新文章

热门文章