More than 3 years have passed since last update.

【Vue.js】算出プロパティによる四則演算のサンプル

Vue.js

Posted at 2020-04-02

#はじめに

Vue.jsにおいては通常プロパティだけでなく、算出プロパティ(computed)も使用できます。
大した内容ではありませんが、四則演算のサンプルを作成しましたので、ソースコードを公開します。

#算出プロパティ―

通常プロパティはmessageをjsで定義すると html中で{{message}}と参照できます。

var app= new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
})

算出プロパティは、computed内で関数で計算した結果をプロパティで定義できます。以下の場合、html中で{{add1}}と参照できます。

var app = new Vue({
    el: '#app',
    data: {
        input1_1:0,
        input1_2:0,
    },
    computed:{
        add1: function() {return this.input1_1 + this.input1_2},
    },
})

#四則演算のサンプル

上記を踏まえて、四則演算の算出プログラムを作成しましたので、ソースを提示します。

##はまった点

一点はまった点としては、入力フォームを以下定義していたのですが、入力した数値を文字列と判定してしまいました。
例えば「10 + 20」の計算結果が「1020」となってしまいました

<!-- うまくいかない例(文字列結合となってしまった) -->
<input type="number" v-model="input1_1">

公式サイトにも記載が有りますが、以下のようにv-model.numberと定義しなくてはいけませんでした。

<!-- うまくいった例 -->
<input type="number" v-model.number="input1_1">

##サンプル

見栄えの為、bootstrap を入れています。

<html lang='ja'>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    
    <body>
        <div id="app">
            <div class="col-sm12">
                <label>足し算:</label><input type="number" v-model.number="input1_1"> + <input type="number" v-model.number="input1_2"> = <span>{{ add1 }}</span>
            </div>
            <div class="col-sm12">
                <label>引き算:</label><input type="number" v-model.number="input2_1"> - <input type="number" v-model.number="input2_2"> = <span>{{ min1 }}</span>
            </div>
            <div class="col-sm12">
                <label>掛け算:</label><input type="number" v-model.number="input3_1"> × <input type="number" v-model.number="input3_2"> = <span>{{ multi1 }}</span>
            </div>
            <div class="col-sm12">
                <label>割り算:</label><input type="number" v-model.number="input4_1"> × <input type="number" v-model.number="input4_2"> = <span>{{ divis1 }}</span>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    input1_1:0,
                    input1_2:0,
                    input2_1:0,
                    input2_2:0,
                    input3_1:0,
                    input3_2:0,
                    input4_1:0,
                    input4_2:0,
                },
                computed:{
                    add1: function() {return this.input1_1 + this.input1_2},
                    min1: function() {return this.input2_1 - this.input2_2},
                    multi1: function() {return this.input3_1 * this.input3_2},
                    divis1: function() {return this.input4_1 / this.input4_2},
                },
            })
        </script>
    </body>
</html>

##出力結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up