Vue.jsを勉強しています。methodsの書き方についてのアドバイスをいただけますでしょうか。

前提・実現したいこと

Vue.jsをチュートリアルに沿って学習しております。
他の言語での開発経験が無い、全くの初心者です。

「該当のソースコード」に記載の簡単な時刻を取得して表示させるプログラムがあったとした時、このままで動作することまではわかりました。

そこで、以下のようなコードの場合、特にmethodsの部分について、もっと良い書き方がある！　そんな書き方は認めない、などのご意見を伺えればと思います。

時刻を表示させるだけのプログラムであれば、このようなコードで実装するのが良いのか、それとも、もっとわかりやすい方法で関数などを利用して処理を行った方が良いのかなど、コーディングの経験が浅いため、迷ってしまっています。

とりあえず動作するコードではなく、こういう書き方を勉強しろ！　というアドバイスなどがございましたら、是非ご教授いただければと思います。

どうぞよろしくお願いいたします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Clock Test</title>
</head>
<body>
  <div id="app">
    <p>{{ hours }}:{{ minutes }}:{{ seconds }}</p>
    <button v-on:click="time">時刻を取得して表示</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      methods: {
        time: function(e) {
          var date = new Date();

          let hours = date.getHours();
          let minutes = date.getMinutes();
          let seconds = date.getSeconds();

          if (hours < 10) { hours = '0' + hours};
          if (minutes < 10) { minutes = '0' + minutes };
          if (seconds < 10) { seconds = '0' + seconds};

          this.hours = hours;
          this.minutes = minutes;
          this.seconds = seconds;
        }
      }
    })
  </script>
</body>
</html>

補足情報

Vue.js v2.6.10

行動規範の内容に同意します

回答1件

ベストアンサー

「moment()」を使う方法と、「new Date()」を使う方法の2つ書いてみました。
ご参照ください。

https://codepen.io/yuhigash/pen/OJLOmWM?&editable=true&editors=101

投稿2019/09/04 11:15

yuhigash

総合スコア327

hhk

2019/09/04 23:21

ご回答ありがとうございます。日付などはmomentを利用することでこんなにスッキリかけることに驚きました。さらに、テンプレートリテラルでわかりやすくシンプルに実装もできるということに気づきました。関数にどのようにまとめるか、ですとか実際にどうやって実装するのかなど、手を動かして学習していきます。ありがとうございました。

行動規範の内容に同意します