Vue.js에서 현재 날짜 시간을 얻는 방법

이 튜토리얼에서는 Date() 함수를 사용하여 Vue.js에서 현재 날짜와 시간을 가져오는 방법을 알아봅니다. 이 튜토리얼에서는 날짜와 시간의 형식을 다양한 방법으로 지정하는 방법도 보여줍니다.

Date() 함수/메서드는 시간대와 함께 전체 날짜와 시간을 제공합니다. 그리고 이 튜토리얼에서는 vue js에서 yyyy-mm-dd와 같은 날짜 및 시간 형식을 지정하는 방법도 안내합니다.

이 튜토리얼에서는 vue js에서 현재 날짜와 시간을 얻는 방법에 대한 2가지 예를 보여줍니다.

실시예 1

이 예에서는 표준 date() 메서드를 사용하여 vue js에서 현재 날짜-시간을 가져옵니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   
<div id="app">
    {{ message }}
</div>
  
</body>
  
<script type="text/javascript">
 new Vue({
    el: '#app',
    data: { 
          message:"Wait......"
      },
      methods:{
        current_dateTime: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var formatted_date = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(formatted_date);
     
        }
    },
    mounted () {
      this.current_dateTime()
    }
 });
    
</script>
</html>

다음 코드는 vue js에서 현재 날짜-시간을 가져옵니다.

<script type="text/javascript">
 new Vue({
    el: '#app',
    data: { 
          message:"Wait......"
      },
      methods:{
        current_dateTime: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var formatted_date = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(formatted_date);
     
        }
    },
    mounted () {
      this.current_dateTime()
    }
 });
    
</script>

실시예 2

이 예에서는 몇 가지 표준 방법을 사용하여 vue js에서 현재 날짜-시간을 가져옵니다.

<template>
  <div id="app">
    <p>Current Date & Time: {{currentDateTime()}}</p>
  </div>
</template>
 
<script>
export default {
  methods: {
    currentDateTime() {
      const current = new Date();
      const date = current.getFullYear()+'-'+(current.getMonth()+1)+'-'+current.getDate();
      const time = current.getHours() + ":" + current.getMinutes() + ":" + current.getSeconds();
      const dateTime = date +' '+ time;
       
      return dateTime;
    }
  }
};
</script>

다음 코드는 vue js에서 현재 날짜-시간을 가져옵니다.

<script>
export default {
  methods: {
    currentDateTime() {
      const current = new Date();
      const date = current.getFullYear()+'-'+(current.getMonth()+1)+'-'+current.getDate();
      const time = current.getHours() + ":" + current.getMinutes() + ":" + current.getSeconds();
      const dateTime = date +' '+ time;
       
      return dateTime;
    }
  }
};
</script>

이 튜토리얼에서는 vue js에서 현재 날짜-시간을 가져오는 방법을 쉬운 코드로 배웁니다.