blog

vueは動的にリアルタイムで時刻を表示する。

次の2つの方法があります。\n日付と時刻を扱うjsライブラリであるday.jsを使います。\n使い方 npm install dayjs --save\ndayjs を 'dayjs' からインポート...

Oct 17, 2020 · 2 min. read
シェア

次の2つの方法があります。

day.jsは日付と時刻を扱うjsライブラリです。

使い方 npm install dayjs --save
dayjsを'dayjs'からインポートする。
そして、最新の時刻を更新するタイマーを作成する。
this.timeId = setInterval(()=>{
 this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');
}, 1000);
詳しくは、day.jsの.jsAPI 
apiドキュメントはこちら https://.com/iamkun/dayjs/blob/master/docs/ja-JP/API-.md

vueフィルタを使用

<template>
 <el-container id="box">
 {{ date | formaDate }}
 </el-container>
</template>
<script>
 //月と日を追加する関数を作成する。
 var padaDate = function(value){
 return value<10 ? '0'+value : value;
 };
export default {
 data() {
 return {
 date: new Date(), //ライブ時間
 };
 },
 watch: {
 
 },
 computed: {},
 filters:{
 //フィルタリングを行う関数を設定する
 formaDate:function(value){
 //日時オブジェクトを作成する
 var date = new Date();
 var year = date.getFullYear(); // 
 var month = padaDate(date.getMonth()+1); //月を保存する
 var day = padaDate(date.getDate()); //日付を保存する
 var hours = padaDate(date.getHours()); // 
 var minutes = padaDate(date.getMinutes()); // 
 var seconds = padaDate(date.getSeconds()); // 
 //フォーマットされた日付を返す
 return year+'年'+month+'月'+day+' +hours+' +minutes+' +seconds+' ;
 }
 },
 methods: {
 
 },
 created() {
 
 },
 mounted() {
 //最新時刻を更新するタイマーを作る
 var _this = this;
 this.timeId = setInterval(function() {
 _this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');
 }, 1000);
 this.initmap();
 },
 beforeDestroy: function() {
 //タイマーのグリーンアウト前にインスタンスを破棄する
 if (this.timeId) {
 clearInterval(this.timeId);
 }
 }
};
</script>
<style lang="scss" scoped>
 
</style>
Read next

JVMヒープ空間の共通パラメーター

公式説明: -XX:+al:View all

Oct 15, 2020 · 1 min read

テスト済み

Oct 15, 2020 · 2 min read

golangランタイムのGOMAXPROCS。

Oct 14, 2020 · 1 min read