vue 倒计时 在template中调用methods的方法 return的结果无法显示的问题;

1. 问题没有解决,自己写了个倒计时组件,做好了一个页面多个倒计时的数据隔离

2. 我这个 分和秒的倒计时、传入了结束倒计时的时间戳;

<template>
  <span>
    {{date}}
  </span>
</template>

<script>
  export default {
    data() {
      return {
        date: '',
        downTimer: ''
      }
    },
    props: ['endTime'],
    mounted() {
      this.downTime()
    },
    methods: {
      downTime() {
        const nowTime = new Date().valueOf()
        const thenTime = (this.endTime - nowTime) / 1000
        if (thenTime >= 0) {
          const minutes = Math.floor(thenTime / 60)
          const seconds = Math.floor(thenTime % 60)
          this.date = `(${minutes}:${seconds})`
        } else {
          this.date = ''
          clearInterval(this.downTimer)
        }
        this.downTimer = setTimeout(() => {this.downTime()}, 1000)
      }
    },
    destroyed() {
      clearInterval(this.downTimer)
    }
  }
</script>

<style lang="scss" scoped>

</style>

 

posted @ 2021-12-30 14:29  郭扬  阅读(675)  评论(0编辑  收藏  举报