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>

运行结果:

相关推荐
勇敢di牛牛27 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Rhys..1 小时前
JS - npm init
开发语言·javascript·npm
程序0072 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
没有鸡汤吃不下饭2 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
云枫晖2 小时前
JS核心知识-模块化
前端·javascript
Asort2 小时前
JavaScript设计模式(十五)——解释器模式 (Interpreter)
前端·javascript·设计模式
喝西瓜汁的兔叽Yan2 小时前
书架效果的实现
javascript·vue.js
Jyywww1212 小时前
uniapp uni.chooseImage+uni.uploadFile使用方法与详解
开发语言·javascript·uni-app
小高0072 小时前
🔥🔥🔥收藏!面试常问JavaScript 中统计字符出现频率,一次弄懂!
前端·javascript·面试
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 26 - 数组长度变更处理
前端·javascript·vue.js