【Vue.js】監視プロパティ 単位変換アプリ（例題）

はじめに

こんにちは！
今回は【Vue.js】監視プロパティを使った単位変換アプリについてアウトプットしていきます！

書き方・解説

長さkm,m,mmを相互変換するアプリを制作します。

HTML

<div id="app">
  <p>
    <input type="text" v-model:value="km">km
  </p>
  <p>
    <input type="text" v-model:value="m">m
  </p>
  <p>
    <input type="text" v-model:value="mm">mm
  </p>
</div>
<!--それぞれのテキストを作り、双方向データバインディングで紐つける-->

Vue.js

var app = new Vue({
  el: "#app",
  data: {
    //⏬初期値はそれぞれ０とする
    km: 0,
    m: 0,
    mm: 0
  },
  watch: {
    //⏬kmの値が変更されたら以下の処理が実行される。
    km: function(value) {
      this.km = value
      this.m = value * 1000 //kmの1000倍の値
      this.mm = value * 1000000 //kmの1000000の値
    },
    //⏬mの値が変更されたら以下の処理が実行される。
    m: function(value) {
      this.km = value / 1000 //mの1000分の1の値
      this.m = value
      this.mm = value * 1000 //mの1000倍の値
    },
    //⏬mmの値が変更されたら以下の処理が実行される。
    mm: function(value) {
      this.km = value / 1000000 //mmの1000000分の1の値
      this.m = value / 1000 //mmの1000分の1の値
      this.mm = value
    }
  }
})

記述の仕方は至って前回と一緒です。dataに情報を入れ、watchで変化が起こった時の処理を記述します。

kmテキストの値を変更すると、

mテキストの値を変更すると、

mmテキストの値を変更すると、

このようにwatchで記述された処理が、双方向データバインディングにより同期されテキストに表示されました。

最後に

今回は単位変換アプリ制作をアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！