【Vue.js】Vueの算術プロパティ

今回はVue.jsの算術プロパティについて紹介していきたいと思います。

算術プロパティとは

算術プロパティとはcomputed（コンピューテッド）オプションに定義される任意のデータを返す関数になります。

要は計算をしたりして値を返す形になります。

算術プロパティの例

下記の例だと左側にprice（100）とtax(2)と2をかけた400の値が表示され右側にはprice（100）とtax(2)をかけた200の値をリターンさせます。

html

<div id="app">
        <div>{{ price * tax * 2 }} | {{ specialPrice }}</div>
</div>

js

<script>
new Vue({
     el: '#app',
     data: {
        price: 100,
        tax: 2
     },
        computed: {
             specialPrice : function() {
                  return this.price * this.tax
             }
        }
})
</script>

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。