如何编写开始和0的for循环并显示每三个索引，包括Vue中的索引0和v-for？

Posted 2023-02-16

【中文标题】如何编写开始和0的for循环并显示每三个索引，包括Vue中的索引0和v-for？

【英文标题】：How to write for loop that start and 0 and show every third index, including index 0 in Vue with v-for?

【发布时间】：2021-11-02 22:47:10

【问题描述】：

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

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

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

【参考方案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>

【参考方案2】：

如果您需要条件循环。您需要在计算属性中执行此操作并返回数组。因此，在计算属性中创建一个包含索引为多个 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 )