Vueはシンプルな計算機を実装する

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な内容は次のとおりです。

ケース要件

ケースアイデア

1. 値AとBのバインディングはv-modelディレクティブを通じて実現されます
2. 計算ボタンにイベントをバインドして計算ロジックを実装する
3. 計算結果を対応する位置にバインドする

静的ページの実装

<div id='アプリ'>
    <h1>シンプルな計算機</h1>
    <div><span>値 A:</span><span><input type="text" v-model='a'></span></div>
    <div><span>値 B:</span><span type="text" v-model='b'></span></div>
    <div><button>計算</button></div>
    <div><span>計算結果</span><span></span></div>
</div>

Vueのインポート

<script type="text/javascript" src="js/vue.js"></script>

静的ページの説明を追加する

<div id='アプリ'>
    <h1>シンプルな計算機</h1>
    <div><span>値 A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>値 B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">計算</button>
    </div>
    <div><span>計算結果</span><span v-text="result"></span></div>
</div>

計算機能を設定する

<script type="text/javascript">
    /* */
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        a: ''、
        b: ''、
        結果： ''
      },
      メソッド: {
        ハンドル: 関数 () {
          // 計算ロジックを実装します this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
</スクリプト>

最終コード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>シンプルな電卓</title>
</head>

<本文>
  <div id='アプリ'>
    <h1>シンプルな計算機</h1>
    <div><span>値 A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>値 B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">計算</button>
    </div>
    <div><span>計算結果</span><span v-text="result"></span></div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /* */
    var vm = 新しい Vue({
      el: "#app",
      データ： {
        a: ''、
        b: ''、
        結果： ''
      },
      メソッド: {
        ハンドル: 関数 () {
          // 計算ロジックを実装します this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: