【Vuejs】SetInterval()でリアルタイム時刻を表示する時計機能を作る(CDN版)

 

今回はCDN版のVuejsでリアルタイムの時刻を表示する時計機能を作りたいと思います。

 

関連記事：

【Vuejs】CDN版でクリックで現在の日付と時刻を取得するボタンを作る

 

 

SetInterval()でリアルタイム時刻を表示する時計機能を作る

 

<app.js>

// Vue.js
const app = new Vue({
el: "#app",
data: {
now:'',
},
methods: {
updateTime: function () {
this.now = new Date().toLocaleString();
//console.log(this.now)
    }
},

mounted: function() {
let timerID = setInterval(this.updateTime, 1);
},
})

 

<index.html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="app.js" defer></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8"></meta>

<div id="app">
現在時刻：
<p>{{ now }}</p>
</div>

 

<実行結果>

 

 

参考資料

 

 

Vue.jsでデジタル時計を作る｜Vue.jsをかじる本

zenn.dev