时间戳

首页 > 解决方案 > 使用 v-for 显示一列中的偶数索引和另一列中的奇数索引

javascript - 使用 v-for 显示一列中的偶数索引和另一列中的奇数索引

问题描述

我想显示我的数组 myArray 的偶数索引：

   myArray: [{'label': 'hasan', 'value': 'hosein'},
            {'label': '1', 'value': '2'},
            {'label': 'gholi', 'value': 'gholam'},
            {'label': '3', 'value': '4'},
            {'label': 'an', 'value': 'goh'},
            {'label': '5', 'value': '6'},
            {'label': 'pashm', 'value': 'khar'},
            {'label': '7', 'value': '8'}]

使用 v-for 在左列的右索引和奇数索引中。

这是我的 HTML 代码：

      <div class="row" v-for="objData in myArray" :key="objData.label">
        // right column
        <div class="line col-2"></div>
        <div class="line col-3 "></div>
        // left column
        <div class="line col-2"></div>
        <div class="line col-3 "></div>
      </div>

我试图将奇数和偶数索引分成两个新数组，并在<div>上面添加了<div class="row>一个 newv-for以循环遍历我单独<div>的 s 中的两个数组，但它扰乱了我的数组元素。那么如何myArray在左列显示右列的偶数索引和奇数索引？

标签： javascripthtmlarraysvue.jsv-for

解决方案

剧透：我更喜欢最后一个

您可以将此技巧与iand一起使用v-if：

new Vue({
  el: '#app',
  data() {
    return {
       myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
    };
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />

<div id="app" class="container">
  <div class="row">
    <div class="col-sm">
      <template v-for="(objData, i) in myArray" :key="objData.label">
        <div v-if="i%2">{{objData.label}}</div>
      </template>
    </div>
    <div class="col-sm">
      <template v-for="(objData, i) in myArray" :key="objData.label">
        <div v-if="!(i%2)">{{objData.label}}</div>
      </template>
    </div>
  </div>
</div>

computed或者在一个道具中将你的数组分成两部分，使用reduce：

new Vue({
  el: '#app',
  data() {
    return {
       myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
    };
  },
  computed: {
    splitArray() {
      const [ evens, odds ] = this.myArray.reduce((res, item, i) => {
        res[i % 2].push(item);
        return res;
      }, [[], []]);
      return { evens, odds };
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />

<div id="app" class="container">
  <div class="row">
    <div class="col-sm">
      <div v-for="objData in splitArray.odds" :key="objData.label">
        {{objData.label}}
      </div>
    </div>
    <div class="col-sm">
      <div v-for="objData in splitArray.evens" :key="objData.label">
        {{objData.label}}
      </div>
    </div>
  </div>
</div>

...如果您想走得更远，而不必在模板中重复自己：

new Vue({
  el: '#app',
  data() {
    return {
       myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
    };
  },
  computed: {
    splitArray() {
      return this.myArray.reduce((res, item, i) => {
        res[1 - i % 2].push(item);
        return res;
      }, [[], []]);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />

<div id="app" class="container">
  <div class="row">
    <div v-for="(col, i) in splitArray" :key="`col-${i}`" class="col-sm">
      <div v-for="objData in splitArray[i]" :key="objData.label">
        {{objData.label}}
      </div>
    </div>
  </div>
</div>

推荐阅读