方法一:使用slice()方法
代码:
<template>
<div>
<!--循环前三个元素-->
<span v-for="(item, index) in arr.slice(0, 3)" :key="index + 'a'">{{ item }}</span> <br>
<!--循环前第六个到第九个元素-->
<span v-for="(item, index) in arr.slice(5, 9)" :key="index + 'b'">{{ item }}</span> <br>
<!--循环后三个元素-->
<span v-for="(item, index) in arr.slice(-3)" :key="index + 'c'">{{ item }}</span>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
}
}
</script>
运行结果:
方法二:使用filter()方法
代码:
<template>
<div>
<!--只循环偶数-->
<span v-for="(item, index) in evenNumbers" :key="index">{{ item }}</span>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
computed: {
evenNumbers() {
return this.arr.filter(item => item % 2 === 0)
}
}
}
</script>
运行结果: