Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組

發(fā)布時(shí)間：2021-07-09 14:57:58 來(lái)源：億速云閱讀：225 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章為大家展示了Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

代碼如下：

<!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)建一個(gè) Vue 實(shí)例或 "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個(gè)元素為一組來(lái)動(dòng)態(tài)分組，在綁定數(shù)據(jù)的地方使用嵌套的v-for循環(huán)，結(jié)果如下圖(3列4行)

Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組

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

Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組

上述內(nèi)容就是Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽