如何使用 v-for 编写从 0 开始并每隔三个索引显示一次的 for 循环，包括 Vue 中的索引 0？

Question

如何使用 v-for 在 Vuejs 中显示此代码？

我想显示从索引 0 开始的数据，然后是每隔三个索引到索引 15 的数据。Data.length 是 16。喜欢0,3,6,9,12,15

for( i = 0; i < data.length; i+=3) {}

Answer 1

可以先在computed中准备数据属性:

new Vue({
  el: "#app",
  data() {
    return {
      items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
    }
  },
  computed: {
    everyThird: function() {
      const thirds = []
      for(let i = 0; i < this.items.length; i+=3) {
        thirds.push(this.items[i])
      }
      return thirds;
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="(item, i) in everyThird" :key="i">
    {{ item }}
  </li>
</div>

Answer 2

如果需要条件循环。您需要在计算的属性和 return 数组中执行此操作。因此，创建一个数组，其中包含计算出的属性中索引为 3 倍数的元素，然后在 v-for 中使用它。在你的组件中你这样做

<div>
  <li v-for="(item, index) in elementInThirdPlace" :key="index">
    {{ item }}
  </li></div>

export default {
//your lists of items are here
 data () { 
     return { items: [1,2,3,4,5,6,6] } 
  },
  computed: {
   elementInThirdPlace () {
    return this.items.filter((element, index) => index % 3 == 0 )
   }
 }
}

}

如何使用 v-for 编写从 0 开始并每隔三个索引显示一次的 for 循环，包括 Vue 中的索引 0？

How to write for loop that start and 0 and show every third index, including index 0 in Vue with v-for?

javascript

vue.js

vuejs2

v-for