<div id="app">
  
  <div class="timer"> イベントまであと {{ countDown }}
  </div>
  
</div>




<script src="//cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/locale/ja.js"></script>
.timer{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
 const vm = new Vue({
  el: '#app',
  data: {
      countDown:''
  },
})
 setInterval(function () {//一秒間に一回再取得
        // diffメソッドを使って、日時の差を、ミリ秒で取得
        const diff = moment( '2021-01-01' ).diff( moment() );
   
        // ミリ秒からdurationオブジェクトを生成
        const duration = moment.duration( diff );
   
        // 日・時・分・秒を取得
        const days = Math.floor( duration.asDays());
        const hours   = duration.hours();
        const minutes = duration.minutes();
        const seconds = duration.seconds();
        
        //カウントダウンの結果を変数に代入
        vm.countDown = days + '日' +  hours + '時' + minutes + '分' + seconds + '秒';
       
    }, 1000);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.