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

前端之家收集整理的这篇文章主要介绍了Vue中v-for的数据分组实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

403_3@代码如下:

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

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

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

猜你在找的Vue相关文章