Vue.js-如何在Vue-v-for循环中将索引增加值2

Question

示例代码如下：在这段代码中，<ul>执行了7次循环，但我需要它分别在<li>标签中打印arr[0]和arr[1]。但是，在下一次，我希望索引值增加2，这样它就会打印arr[2]，arr[3]，然后再次将索引值增加1，index变为4，然后打印arr[4]和arr[5]等等。提前感谢您的解决方案。

<ul class="columns" v-for="index in 7" :key="index">
<li>
arr[index]
</li>
<li>
arr[index+1]
</li>
</ul>

Answer 1

你觉得这个解决方案怎么样(也许不那么优雅，但我希望它能给你带来你想要的东西(：

<template v-for="index in arr" :key="index">
<ul v-if="index % 2 === 0" class="columns">
<li>
{{ arr[index] }}
</li>
<li v-if="!!arr[index+1]">
{{ arr[index+1] }}
</li>
</ul>
</template>

Answer 2

v-for循环中没有步骤定义，但您可以执行以下逻辑来实现您想要的：

<ul class="columns" v-for="index in [...Array(7)].map((_,i)=>i).filter(i=>i%2===0)" :key="index">
<li>
{{index}}
</li>
<li>
{{index+1}}
</li>
</ul>

但非常建议定义一个返回[...Array(7)].map((_,i)=>i).filter(i=>i%2===0)的计算属性，如：

computed:{
evenNumbers(){
return [...Array(7)].map((_,i)=>i).filter(i=>i%2===0)
}
}

<ul class="columns" v-for="index in evenNumbers" :key="index">
<li>
{{index}}
</li>
<li>
{{index+1}}
</li>
</ul>

[...Array(7)]将给出一个未定义项的数组：

[undefined,undefined,....]

我们使用映射方法作为第一个参数，即当前值，在这种情况下是由_表示的undefined值(只是选择一个短名称(，第二个参数是我们想要返回的当前索引，而不是_，然后过滤返回的索引，这些索引是2个i%2===0的倍数

Answer 3

试用

<li>
arr[index==0?index:(index+index)]
</li>
<li>
arr[index==0?index+1:(index+index+1)]
</li>