前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/04 23:21