홈>2020-02-01 00:43

javascript - 타임 스탬프를 지속적으로 비교

와이즈 비즈를 보내려고합니다 unlockTime 에 소품 그래서 component1 component 1 후에 렌더링됩니다 지나 갔다.

unlockTime 를 계속 확인하려면 어떻게해야합니까? 통과했다 ( unlockTime )?

Main.vue :

Date.now() > this.unlockTime ? true : false

Component1.vue

<template>
<component1
  :unlockTime="unlockTime">
</component1>
</template>
<script>
  computed: {
    unlockTime() {
      return Date.now() + (5 * 60 * 1000)
    }
  }
</script>

<template>
  <div v-if="unlock">
    Some Content Here
  </div>
</template>
<script>
  props: ["unlockTime"]
  data(){
    return{
      unlock: Date.now() > this.unlockTime ? true : false
    }
  }
</script>

javascript vue.js

답변 # 1

하나의 간단한 해결책 :

<올>

setInterval 사용 현재 날짜 시간을 가져 오려면

감시자/계산을 사용하여 현재 날짜 시간을 비교하고 날짜 시간을 잠금 해제하여 데이터 속성 =isLock을 업데이트합니다.

Vue.component('child', {
  template: `<div>
              <p v-show="isLock"><span>Waiting for Unlock...{{unlock}} - {{currentDateTime}}</span></p>
              <p v-show="computedIsLock"><i>computed lock:{{computedIsLock}}</i></p>
             </div>`,
  props: ['unlock'],
  created: function () {
    this.intervalMgr = setInterval(()=>{
      this.currentDateTime = new Date()
    }, 500)
    this.isLock = this.currentDateTime < this.unlock
  },
  data(){
    return {
      isLock: true,
      currentDateTime: new Date(),
      intervalMgr: null
    }
  },
  computed: {
    computedIsLock: function () {
      return this.currentDateTime < this.unlock
    }
  },
  watch: {
    currentDateTime: function (newVal) {
      this.isLock = newVal < this.unlock
    }
  },
  beforeDestroy: function () {
    clearInterval(this.intervalMgr)
  }
})
app = new Vue({
  el: "#app",
  data: {
    unlockTime: new Date()
  },
  created: function () {
    this.addTime()
  },
  methods: {
    addTime: function () {
      this.unlockTime = new Date()
      this.unlockTime.setSeconds(this.unlockTime.getSeconds() + 5)
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <button @click="addTime()">Add Time</button>
    <child :unlock="unlockTime"></child>
</div>

Python2.net

javascript - 타임 스탬프를 지속적으로 비교

관련 자료