vue 实现时间

Vue 实现时间显示

在Vue中显示时间可以通过多种方式实现，包括使用原生JavaScript的Date对象、第三方库如moment.js或day.js，以及Vue的过滤器或计算属性。

使用原生JavaScript的Date对象

<template>
  <div>{{ currentTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString()
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString()
    }, 1000)
  }
}
</script>

使用day.js库（轻量级替代moment.js）

<template>
  <div>{{ formattedTime }}</div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      currentTime: dayjs()
    }
  },
  computed: {
    formattedTime() {
      return this.currentTime.format('HH:mm:ss')
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = dayjs()
    }, 1000)
  }
}
</script>

Vue 实现倒计时功能

倒计时功能通常用于限时活动或计时器场景，可以通过计算剩余时间并动态更新显示。

<template>
  <div>剩余时间: {{ countdown }}</div>
</template>

<script>
export default {
  data() {
    return {
      endTime: new Date().getTime() + 60000, // 1分钟后结束
      countdown: '00:00:00'
    }
  },
  mounted() {
    this.updateCountdown()
    this.timer = setInterval(this.updateCountdown, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    updateCountdown() {
      const now = new Date().getTime()
      const distance = this.endTime - now

      if (distance < 0) {
        clearInterval(this.timer)
        this.countdown = '00:00:00'
        return
      }

      const hours = Math.floor(distance / (1000 * 60 * 60))
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((distance % (1000 * 60)) / 1000)

      this.countdown = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  }
}
</script>

Vue 实现时间选择器

时间选择器可以通过原生HTML的<input type="time">或使用第三方组件库如Element UI、Vuetify等实现。

使用原生HTML时间输入

<template>
  <input type="time" v-model="selectedTime" @change="handleTimeChange">
</template>

<script>
export default {
  data() {
    return {
      selectedTime: ''
    }
  },
  methods: {
    handleTimeChange() {
      console.log('选择的时间:', this.selectedTime)
    }
  }
}
</script>

使用Element UI的时间选择器

<template>
  <el-time-picker
    v-model="selectedTime"
    placeholder="选择时间">
  </el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: new Date()
    }
  }
}
</script>

Vue 实现相对时间显示

相对时间显示（如"3分钟前"）可以通过计算当前时间与目标时间的差值来实现。

<template>
  <div>{{ relativeTime }}</div>
</template>

<script>
export default {
  props: {
    timestamp: {
      type: Number,
      required: true
    }
  },
  computed: {
    relativeTime() {
      const now = new Date().getTime()
      const diff = now - this.timestamp
      const seconds = Math.floor(diff / 1000)
      const minutes = Math.floor(seconds / 60)
      const hours = Math.floor(minutes / 60)
      const days = Math.floor(hours / 24)

      if (days > 0) return `${days}天前`
      if (hours > 0) return `${hours}小时前`
      if (minutes > 0) return `${minutes}分钟前`
      return `${seconds}秒前`
    }
  }
}
</script>

以上方法涵盖了Vue中常见的时间处理需求，开发者可以根据具体场景选择适合的实现方式。