Memo
vue momentを使ってカウントアップの仕組みを作る
Home
›
Memo
›
momentを使ってカウントアップの仕組みを作る
本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
<template>
<p>{{ currentSpendTime }}</p>
</template>
<script>
…
export default {
data: function() {
return {
time : null,
timer: null,
currentSpendTime: "",
}
},
methods: {
// カウントアップスタート
start(checklist) {
this.time = new moment()
let self = this; //setInterval内でこのComponentのmethodを指定するためにself変数を定義
this.timer = setInterval(function() { self.currentTime() }, 1000)
},
// カウントアップストップ
stop: function () {
clearInterval(this.timer)
},
// momentを使って現在のカウントを currentSpendTime に保存する
currentTime() {
// ミリ秒からdurationオブジェクトを生成
const duration = moment.duration( momentd().diff( this.time ) );
// 日・時・分・秒を取得
const hours = duration.hours();
const minutes = duration.minutes();
const seconds = duration.seconds();
this.currentSpendTime = `${hours}:${minutes}:${seconds}`
},
...
</script>
関連ページ
Nuxt.js環境構築
#vue
2020-10-21 16:21:42
v-model
#vue
2020-07-13 19:05:01
Nuxt Store
#vue
2021-01-08 16:11:24
Nuxt local起動をhttpsで起動する
#vue
2020-11-11 15:05:58
Nuxt で axiosを利用する
#vue
2021-02-25 20:17:10
Back