Vue JS 현재 날짜 및 시간 가져오기

2610 단어 vuejavascripttimedate
이 기사에서는 Vue js가 현재 날짜와 시간을 가져오는 것을 볼 것입니다. Vue js에서는 Date() 함수를 사용하여 얻을 수 있기 때문에 현재 날짜와 시간을 얻는 것이 매우 간단합니다. Date()는 시간대와 함께 전체 날짜 및 시간을 제공합니다. 따라서 yyyy-mm-dd와 같은 더 나은 형식을 만들 수도 있습니다.

vue js에서 생성자는 전체 날짜를 구성하기 위해 다음 메서드를 포함하는 새 날짜 인스턴스를 생성하는 new Date()를 사용하고 있습니다. 따라서 이 예에서는 현재 타임스탬프, 현재 날짜, 현재 월, 현재 연도, 날짜 및 시간을 가져옵니다.

Vue js가 현재 타임스탬프를 가져오는 예를 살펴보겠습니다.

getDate() 함수: 해당 월의 날짜(1-31)를 반환합니다.

getMonth() 함수: 1월은 0이고 12월은 11인 월을 반환합니다.

getFullYear() 함수: 4자리 형식(YYYY)으로 연도를 반환합니다.

Example 1:



이 예제에서는 현재 날짜를 가져오고 현재 시간을 형식으로 가져옵니다.

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Current Date And Time - Techsolutionstuff</title>
    <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:"Welcome, Please Wait...."
      },
      methods:{
        callFunction: function () {

            var currentDate = new Date();
            console.log(currentDate);

            var currentDateWithFormat = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(currentDateWithFormat);

        }
    },
    mounted () {
      this.callFunction()
    }
 });

</script>
</html>


Example 2:



이 예에서는 현재 날짜를 d-m-yyyy 형식으로 가져옵니다.

<template>
  <div id="app">
    <h1>Get Current Date And Time</h1>
    <p>{{currentDate()}}</p>
  </div>
</template>

<script>
export default {
  methods: {
    currentDate() {
      const current = new Date();
      const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
      return date;
    }
  }
};
</script>


Example 3:



이 예제에서는 toLocaleString() 함수를 사용하여 날짜를 표시합니다.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

좋은 웹페이지 즐겨찾기