単純な計算機だけでVueのjsのプロパティを使用して

この記事はどのように簡単にvueのJSで単純な計算機を作成するだけで、定期的に計算されたプロパティの組み合わせで使用して任意のイベントを以下のアニメーションを使用せずに作成する方法を示します.

Vueテンプレートでは、4つのHTML要素を宣言します.

ナンバー1

オプションとして

ナンバー2

結果のために。

<template>
<section>
  <input placeholder="num1" type="number">
  <select > 
    <option value="+"> + </option>
    <option value="-"> - </option>
    <option value="*"> * </option>
    <option value="/"> / </option>
  </select>
  <input placeholder="num2" type="number" >
  <h2></h2>
  </section>
<template>

次に、このコンポーネント内の4つのプロパティを宣言し、data ()モデル内で3つを指定します.

<script>
    export default {
      data() {
        return {
          num1: 0,
          num2: 0,
          operand:""
        };
      },
    }
</script>

次に、これらの3つのプロパティをオペランドプロパティ以外の数修飾子を持つVモデルディレクティブを使用して入力フィールドにバインドします.
番号修飾子はNUM 1とNUM 2プロパティの値を数値にキャストし、テンプレートの外部に変換する必要はありません.

<input placeholder="num1" type="number" v-model.number="num1">
<select v-model="operand" > 
  <option value="+"> + </option>
  <option value="-"> - </option>
  <option value="*"> * </option>
  <option value="/"> / </option>
</select>
<input placeholder="num2" type="number" v-model.number="num2">

計算を実装するための複数の方法がありますが、最も簡単な方法は計算されたプロパティを使用することです.
Computerプロパティは、data ()モデルで宣言された既存のプロパティから新しいデータを作成するのに最適な方法です.
また、内部で使用されたプロパティのいずれかが変更されたときに、計算されたプロパティ内の任意の操作を無効にすることができます.

computed: {
  result() {
    switch(this.operand) {
      case "+":
        return this.num1 + this.num2
      case "-":
        return this.num1 - this.num2
      case "*":
        return this.num1 * this.num2
      case "/":
        return this.num1 / this.num2
    }
  }
}

NUM 1、NUM 2またはオペランドプロパティでデータが変更されるたびに、結果計算されたプロパティは、オペランドに基づいてNUM 1とNUM 2を再計算し、適切な結果を返します.
次に、結果をテンプレートに使用できます.

<h2> {{result}} </h2>