使用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的数据分组实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。