Vue.jsのcomputedプロパティ(算出プロパティ)の使い方。条件分岐や引数も使ってみる

Vue.jsのcomuptedプロパティについて、基本的な使い方や内部での条件分岐、引数なども紹介。

computedプロパティ(算出プロパティ)

あるデータを加工したものをVueインスタンスのプロパティとして公開できます。

例として、入力された数字に対して10%の税金をかけるコードを書いてみます。

<div id="calc">
    <div><input v-model="price" type="tel">円</div>
    {{ tax }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="sample.js"></script>

new Vue({
    el: '#calc',
    data: {
      price: '',
    },
    computed: {
      tax: function() {
        return this.price * 1.1
    }
  }
  })

html側、v-model=”price”で取得した数値に対して、消費税10%分を掛けています。

[Vue.js]v-modelの使い方

要は関数を作って特定データに対してゴニョゴニョして、結果をreturnで返しています。

computedプロパティでは必ずreturnで返り値を返します。

html側では{{ 関数名 }}で返り値が表示されます。

comutedプロパティ内で条件分岐を書いてみる

例えば、1000円以上は消費税10%。それ以下は消費税5%と表示するコードを書いてみます。

new Vue({
    el: '#calc',
    data: {
      price: '',
    },
    computed: {
      tax: function() {
        if (this.price >= 100) {
          return this.price * 1.1
        } else {
          return this.price * 1.05
        }
    }
  }
  })

computedプロパティの中でも普通に条件分岐が使えます。

注意したい点として、elseにも返り値を記述することです。

また、条件分岐ではなく、return一行に三項演算子なら記述することができます。

computedプロパティで引数を使ってみる

次にcomputedプロパティで引数を使ってみます。

ここでは引数に税率を渡す例で考えてみます。

先にjs側のコードです。

new Vue({
    el: '#calc',
    data: {
      price: '',
    },
    computed: {
    taxCalc: function() {
      return function(tax) {
        return this.price * tax
      }
    }
  }
  })

computedプロパティで引数を渡す場合には、返り値を関数にし、その関数内で引数を渡すことができます。

taxの引数は、html側で記述します。

<div id="calc">
    <div><input v-model="price" type="tel">円</div>
    {{ taxCalc(1.1) }}
</div>