下面我就为大家分享一篇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-->
<p id="app">
<table>
<tbody>
<tr v-for="(row,i) in listtemp">
<td v-for="(cell,j) in row">
<p :id="'t_'+(i*3+j)">data-{{cell}}</p>
</td>
</tr>
</tbody>
</table>
</p>
</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行)
这里还对包裹数据的每个p的id作了特别的处理，动态产生id，每个id都有一个字符串前缀t，后面是数据的索引，索引采用i*3+j计算获得，以便于对应到原始的数据list。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
angular 4.x+ionic3踩坑之ionic3.x pop反向传值详解
基于vue中css预加载使用sass的配置方式详解
微信小程序中实现手指缩放图片的示例代码
以上就是vue中v-for的数据分组实例的详细内容。