Vue 中如何定时展示一个动态的数据？

  • Z时代
  • 2024-02-24
  • 分类：IT

后端 websocket 向前端不定时的推数据（每次一条）。
前端拿到数据要求每一条展示 5s。
请问下在 Vue 中大概是个什么样的实现思路。

function handleReceiveMessage(e) {
  let data = JSON.parse(e.data);
  setTimeout(() => {
    // xxxxxx
  }, timer.value);
  timer.value += 5000;
}

如上有两个问题：

  1. 什么时机把 timer 重置为 0。
  2. 最后一次如何控制只展示 5s。

回答：

  1. Vue 是 MVVP 框架，MVVM 的核心是：开发者负责编写数据到视图的映射，然后只维护数据

  2. 所以具体到你的需求，就是：

    1. 先完成消息数据到显示推送视图的映射
    2. 然后将 ws 得到的数据放进数组，vue 就会完成渲染
    3. 然后适当处理动画效果

回答：

data(){
        message: 'hello'
      }
//let newMessage = websock的数据
setTimeout(() => {
    this.message = newMessage
}, 5000);

回答：

 // 获取数据的函数
    getData() {
        .....
    }
    // 定时器
    time() {
        return setTimeout(()=>{
            this.getData()
        },5000)
    }
    watch: {
      list() {
          this.time()  
          }
      }
  destroyed() {
      clearTimeout(this.time)
  }

监听list只要它变化就去触发定时器

以上是 Vue 中如何定时展示一个动态的数据？ 的全部内容， 来源链接： utcz.com/p/933319.html

回到顶部