首页 > 其他分享 >vue中,每一秒一个data,如何保存所有data,并一次只要8条数据?

vue中,每一秒一个data,如何保存所有data,并一次只要8条数据?

时间:2023-09-08 20:01:26浏览次数:29  
标签:vue data 截取 let currentIndex 每一秒 数据 allData

你可以通过在Vue组件中定义一个数组来保存所有的数据,然后在监听事件中实时截取需要显示的数据。可以借助Vue的生命周期钩子函数和计算属性来实现。

首先,在Vue组件的data中定义一个数组allData来保存所有的数据,并定义一个变量currentIndex来记录当前截取的位置:

data() {
  return {
    allData: [], // 保存所有数据
    currentIndex: 0, // 当前截取的位置
  }
},

然后,在监听事件的回调函数中,将返回的数据加入到allData数组中,并根据currentIndex截取需要显示的数据,同时更新currentIndex的值:

uni.$on('getData', (obj) => {
  let data = ['aa','bb','cc','dd','ee','ff'] // 假设返回的数据

  // 将返回的数据加入到allData数组中
  this.allData.push(...data)

  // 截取需要显示的数据
  let startIndex = this.currentIndex
  let endIndex = this.currentIndex + 8
  let result = this.allData.slice(startIndex, endIndex)

  // 更新currentIndex的值
  this.currentIndex += 8

  // 处理奇数偶数的情况,如果剩余的数据不足8条,则一起显示
  if (this.currentIndex >= this.allData.length) {
    this.currentIndex = 0
    result = this.allData.slice(startIndex)
  }

  console.log(result) // 打印需要显示的数据,根据需求进行操作
})

这样,每次监听到getData事件时,将返回的数据加入到allData数组中,根据currentIndex截取需要显示的数据。当currentIndex超过allData的长度时,重置currentIndex的值,并一起显示剩余的数据。

请根据实际需求在代码中进行适当的调整。

标签:vue,data,截取,let,currentIndex,每一秒,数据,allData
From: https://blog.51cto.com/M82A1/7412671

相关文章

  • vue3+PHP实战手册(16)
    目录通讯录管理系统登录通讯录管理系统登录使用v-model进行双向绑定,将表单输入框的内容同步给JavaScript中相应的变量,设置了相应的事件监听器。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>通讯录管理系统</title></head>......
  • Vue.js 的设计与实现(一)
    一、框架设计思路:权衡的艺术从范式角度看,框架设计成命令式好还是声明式好?框架设计成运行时?编译时?运行时+编译时?1.1、命令式代表框架:jQuery特点:关注过程1.2、声明式代表框架:Vue.js特点:关注结果1.3、例子有以下需求:1、获取id为app的div标签2、它的文本内容为helloworld3、为其绑......
  • vue项目Canvas给图片改色,返回base64的图片
     (适应于纯色图片)1.vue文件中创建canvas<!--落图图片改色--><canvasid="mycanvas"></canvas>2.创建changeImgColor.js文件letctx=null;letcanvas=null;letbase64Info=null;exportfunctionsetImgColor(url){returnnewPromise((resolve......
  • Vue开发流程
    #Vue简介  Vue(发音为/vjuː/,类似 view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue都可以胜任。声明式渲染:Vue基于标准H......
  • 解决vue3+js unplugin-auto-import/vite 自动引入生效后 页面eslint报错
           ......
  • vue实现一个右侧悬浮工具栏
    最近在写商城时需要用到一个右侧悬浮的工具栏,并把这个写成了控件,刚开始是想要使用elementui自带的backtop组件的,无奈能力有限,不能改造成多列的结果,所以就只能自己写一个了这个控件实现的功能为,一开始只有3个内容,当页面下滑后会多出一个回到顶部的内容,并使用定时器连贯的回到顶部......
  • vue路由跳转
    第一种方式  <router-link :target="$store.getters.username?'_blank':'_self'"class="course-item-cont":to="$store.getters.username?{path:'/VirtualClass/Detail',query:{id:item.id,introductionPat......
  • Three ways to conditionally remove variables in a dataset
    Method1:proccontentsdata=carsshortout=outds00;run;dataoutds(keep=name);setoutds00;vnam=substr(name,1,1);ifvnamne"M"thenoutput;run;proctransposedata=outdsout=outds01(drop=_name__label_);idname;run;dataoutds02(drop=......
  • vue+el-timeline动态表格时间线
    原文链接:https://blog.csdn.net/Shids_/article/details/126645038前言当我们需要在页面中展示一系列时间相关的事件时,常常会考虑使用时间线来呈现。而在vue框架中,我们可以借助一些组件库来快速实现时间线的功能。其中,el-timeline就是一款非常优秀的时间线组件,它可以帮助我们......
  • Firefox正在优化Vue.js,后续将提高运行效率
        据了解,日前Firefox浏览器正针对Vue.js进行优化,而早前FireFox浏览器在面向Vue3时遇到了一些性能问题。当前开发人员在Firefox118内部版本中进行了测试,而正式版本将于9月底发布,将“显著提升”Vue.js的运行效率ireiuposghj。据了解,开发人员目前正在更新Speedo......