Vue中v-for的數據分組實例

更新時間：2018年03月07日 14:42:21 作者：_學而時習之_

下面小編就為大家分享一篇Vue中v-for的數據分組實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用Vue.js可以很方便的實現(xiàn)數據的綁定和更新，有時需要對一個一維數組進行分組以方便顯示，循環(huán)可以直接使用v-for，那分組呢？這里需要用到vue的computed特性，將數據動態(tài)計算分組。

代碼如下：

<!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>
 // 創(chuàng)建一個 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個元素為一組來動態(tài)分組，在綁定數據的地方使用嵌套的v-for循環(huán)，結果如下圖(3列4行)

這里還對包裹數據的每個div的id作了特別的處理，動態(tài)產生id，每個id都有一個字符串前綴T，后面是數據的索引，索引采用i*3+j計算獲得，以便于對應到原始的數據list。

以上這篇Vue中v-for的數據分組實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中的插槽詳解
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-10-10
antd日期選擇器禁止選擇當天之前的時間操作
這篇文章主要介紹了antd日期選擇器禁止選擇當天之前的時間操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
解讀Vue組件注冊方式
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個頁面劃分成一個個小的模塊，每個模塊單獨定義，每個模塊就是一個組件。組件可以進行復用，A頁面和B頁面有一個相似的模塊，可以抽離成一個可局部修改的組件。
2021-05-05
Vue+Echarts繪制餅圖的示例詳解
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)繪制餅圖，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
2023-03-03
Vue組件簡易模擬實現(xiàn)購物車
這篇文章主要為大家詳細介紹了Vue組件簡易模擬實現(xiàn)購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
VUE中的v-if與v-show區(qū)別介紹
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-03-03
vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼
作為一個AI模型,人臉識別涉及到多個技術領域,下面這篇文章主要給大家介紹了關于vue使用tracking實現(xiàn)人臉識別/人臉偵測的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-09-09
Vue3.0中如何監(jiān)聽props方法
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue使用openlayers創(chuàng)建地圖
這篇文章主要為大家詳細介紹了vue項目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue+element開發(fā)使用el-select不能回顯的處理方案
這篇文章主要介紹了vue+element開發(fā)使用el-select不能回顯的處理方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07