使用 v-for 在一列中显示偶数索引，在另一列中显示奇数索引

Question

我想显示数组 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 class="row> 上方添加了一个 <div> 和一个新的 v-for 以循环遍历我单独的 <div>s 但它扰乱了我的数组元素。那么如何在右侧显示 myArray 的偶数索引，在左侧列显示奇数索引？

Answer 1

Spoiler: I like the last one better

您可以将此技巧与 i 和 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>

或者使用 reduce:

在 computed 道具中将数组一分为二

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>

Answer 2

你应该这样制作你的数据

var myArray = [
  { 
    left: {'label': 'hasan', 'value': 'hosein'},
    right: {'label': '1', 'value': '2'}
  }...
];

或

使用 display:grid 不使用 div.row

<div v-for="(objData, index) in myArray" :key="objData.label" :class="['line', {col-2: index%2 === 1, col-3: index%2 === 0}"></div>

Answer 3

那this呢？设法将数组分成两列，但求助于两个 v-for，也许你不会喜欢那样。它使用的 javascript 少于提出的其他解决方案，但权衡了更复杂的 HTML.

HTML:

<div class="row">

  <!-- Odd column -->
  <div style="border: 1px solid red;">
    <div v-for="(value, index) in myArray">
      <div v-if="index % 2 != 0">{{ value }}</div>
    </div>
  </div>

  <!-- Even column -->
  <div style="border: 1px solid blue;">
    <div v-for="(value, index) in myArray">
      <div v-if="index % 2 == 0">{{ value }}</div>
    </div>
  </div>

</div>

使用 v-for 在一列中显示偶数索引，在另一列中显示奇数索引

Showing even indexes in one column and odd indexes in another column using v-for

html

javascript

arrays

vue.js

v-for