v-for 循环数组的某一部分

方法一:使用slice()方法

代码:

html 复制代码
<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()方法

代码:

html 复制代码
<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>

运行结果:

相关推荐
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_10 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy10 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy10 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子11 小时前
迭代器和生成器
前端·javascript
源猿人14 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin14 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖16 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬16 小时前
Promise 的场景和最佳实践
前端·javascript
Asort16 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript