cari

Rumah >hujung hadapan web >tutorial js >Vue中v-for的数据分组实例

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

亚连
亚连asal
2018-05-31 17:32:342357semak imbas

下面我就为大家分享一篇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="&#39;T_&#39;+(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: &#39;#app&#39;,
  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的配置方式详解

微信小程序中实现手指缩放图片的示例代码

Atas ialah kandungan terperinci Vue中v-for的数据分组实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：vue2.0 computed 计算list循环后累加值的实例Artikel seterusnya：使用vue中的v-for遍历二维数组的方法

Artikel berkaitan

Lihat lagi