vue.js入門_11_算出プロパティ（getter、setter）

by s9iwork

HTML

<div id="app">
  <p>price: <input type="text" v-model:value="price"></p>
  <p>tax included price: <input type="text" v-model:value="taxIncludePrice"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

JavaScript

new Vue({
  el: '#app',
  data: {
    price: 100,
  },
  computed: {
    taxIncludePrice: {
      get: function() {
        return parseInt(this.price * 1.08)
      },
      set: function(taxIncludePrice) {
      	this.price = Math.ceil(taxIncludePrice / 1.08)
      }
    },
  }
})