[Vue] Date.now()를 통해 실시간 타임스탬프 만들기

 

 

 

▶ 글자를 변경할 때 마다 바뀌는 타임스탬프

[JavaScript]

new Vue({
       el: '#app',
       data: {
             name: 'Jinny',
       },
       computed: {
              now () {
              return `Hi ${this.name}, now is ${Date.now()}`
         }
    }
})

 

[HTML]

<div id="app">
     <input v-model="name">
     <p>
      {{now}}
     </p>
</div>

 

---

 

▶ 동적으로 변경되는 타임스탬프

[JavaScript]

new Vue({
       el: '#app',
       data: {
              name: 'David',
              now: 0
       },
       mounted () {
             this.updateNow()
             setInterval(this.updateNow.bind(this) , 1000)
       },
  
       methods: {
              updateNow() {
               this.now = Math.round(Date.now() / 1000)
         }
       }
})

 

[HTML]

<div id="app">
     <p>
      {{now}}
     </p>
</div>

 

---

 

▶ 위 기능을 활용한 실시간 시계 만들기

[JavaScript]

 created() {
         this.searchTimes();
         this.nowTimes();
         this.setDate()
         setInterval(this.nowTimes.bind(this) , 1000);
  }



  methods: {

    setDate(){
           let year = new Date().getFullYear();
           let month =new Date().getMonth() + 1 < 10? "0" + (new Date().getMonth() + 1): new Date().getMonth() + 1;
           let date =new Date().getDate() < 10? "0" + new Date().getDate(): new Date().getDate();
           let hh =new Date().getHours() < 10? "0" + new Date().getHours(): new Date().getHours();
           let mm =new Date().getMinutes() < 10? "0" + new Date().getMinutes(): new Date().getMinutes();
           let ss =new Date().getSeconds() < 10? "0" + new Date().getSeconds(): new Date().getSeconds();
      return {
             'year' : year
             , 'month' : month
             , 'date' : date
             , 'hh' : hh
             , 'mm' : mm
             , 'ss' : ss
      }
    },
    nowTimes() {
            this.nowTime = this.setDate().year + "-" + this.setDate().month + "-" + this.setDate().date + "-" +

            this.setDate().hh + ":" + this.setDate().mm + ":" + this.setDate().ss;
    }

}

 

[ HTML ]

<p>{{searchTime}}</p>
<p>{{nowTime}}</p>