Vue.js ライブラリ「vue-timeago」を使用して日付計算を表示する
- 作成日 2020.03.09
- Vue.js
- vue-timeago, Vue.js, サンプルコード
Vue.jsのライブラリである「vue-timeago」を使用して、日付計算を表示する簡単なサンプルコードと導入手順を記述してます。
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
※CentOS8にVue.jsの環境構築はこちら
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
vue-timeagoインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
vue i -S vue-timeago
vue-timeago使い方
まずは、src配下のmain.jsを下記のように編集します。
import Vue from 'vue'
import App from './App.vue'
import VueTimeago from 'vue-timeago'
Vue.config.productionTip = false
Vue.use(VueTimeago, {
name: 'Timeago',
locale: 'ja', //デフォルトのlocal
//利用するlocal
locales: {
ja: require('date-fns/locale/ja'),
'zh-CN': require('date-fns/locale/zh_cn')
}
})
new Vue({
render: h => h(App),
}).$mount('#app')
次にsrc配下のApp.vueを下記のように編集します。
<template>
<div id="app">
<div>
<p>日付を計算</p>
<timeago :datetime="time"></timeago>
</div>
<div>
<p>localに中文を指定</p>
<timeago :datetime="time" locale="zh-CN"></timeago>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
time: '2020-02-12',
converter: undefined
};
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスすると設定した 2020-02-12 からの日付が計算され表示されます。
-
前の記事
Nuxt.js vue-clock2を使用してアナログ時計を表示する 2020.03.09
-
次の記事
Windows10 go言語をインストールする 2020.03.09
コメントを書く