vue.js入門_12_監視プロパティ(単位変換アプリ)

by s9iwork

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>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

JavaScript

new Vue({
  el: '#app',
  data: {
    km: 0,
    m: 0,
    mm: 0
  },
  watch: {
    km: function(value) {
      this.km = value
      this.m = value * 1000
      this.mm = value * 1000 * 1000
    },
    m: function(value) {
      this.km = value / 1000
      this.m = value
      this.mm = value * 1000
    },
    mm: function(value) {
      this.km = value / 1000 / 1000
      this.m = value / 1000
      this.mm = value
    }
  }
})