スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【Vue.js】computedとmoment.jsで日時をフォーマットする

【Vue.js】computedとmoment.jsで日時をフォーマットする




今すぐ登録したい方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1位】フォスターフリーランス【案件保有数5000件以上。業界20年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】Midworks(ミッドワークス) 【リモート案件が超豊富。正社員並みの保障アリ】




こんにちは、mah(@RailsRubyMah6h)です。


このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。


今回は、


  • 【Vue.js】computedとmoment.jsで日時をフォーマットする


について書いていきます。




【Vue.js】computedとmoment.jsで日時をフォーマットする





手順


1、computedに、moment.jsでフォーマットする処理を記述

// component.vue

computed: {
    // 開始日時
    startParse: function() {
      return moment(this.task.start).format('YYYY-MM-DDThh:mm')
    },
    // 終了日時
    endParse: function() {
      return moment(this.task.end).format('YYYY-MM-DDThh:mm')
    }
}




2、v-modelに、1のstartParseendParseを指定し、computedの戻り値を使用する

//component.vue

<template>
  <b-form-input id="start-label" type="datetime-local" v-model="startParse" min="2000-01-01T00:00" max="2099-12-31T23:59" required></b-form-input>
</template>


これで日時が指定したフォーマットになります。




注意点


1、computedはmethodsと違って引数を持てない


2、computedは、戻り値をreturnして使うこと。

戻り値をthis.〇〇のようにプロパティには代入出来ない。

代入しようとするとエラーになる。




以上です。




Vue.jsや流行りのTypeScriptを学びたい人へ


Vue.jsTypeScriptReact.jsを学習するなら、Udemyの下記のコースがおすすめ★

(自分も全て受講しました)


  • Vue.js

Vue.js + Firebaseで作るシングルページアプリケーション

f:id:mah666hhh:20200815162939p:plain


  • TypeScriipt

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門

f:id:mah666hhh:20200815162951p:plain


  • React.js

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

f:id:mah666hhh:20200815162919p:plain




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★

もしよかったらTwiiterのフォローもお願いします★