Vueはシンプルな計算機能を実装します

Vueはシンプルな計算機能を実装します

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

機能紹介

1. 加算、減算、乗算、除算が実現可能
2.ゼロ化を実現できる
3. バックスペースを実装する

レンダリングは平均的で、スタイルはランダムで、主に機能と実装方法に焦点を当てています

コードと説明

1. HTML部分

まず、レイアウトをレイアウトし、何をしたいかを書き、各ボタンにクリックイベントをバインドします。

<div id="ボックス">
  <テーブル>
    <tr>
      <td><input type="button"value="del" @click="del()"></td>
      <td><input type="button"value="C" @click="clean()"></td>
      <td colspan="2"><input type="text" style="width: 200px" value="" v-model="rel"></td>

    </tr>
    <tr>
      <td><input type="button"value="7" @click="add('7')"></td>
      <td><input type="button"value="8" @click="add('8')"></td>
      <td><input type="button"value="9" @click="add('9')"></td>
      <td><input type="button"value="/" @click="add('/')"></td>
    </tr>


    <tr>
      <td><input type="button"value="4" @click="add('4')"></td>
      <td><input type="button"value="5" @click="add('5')"></td>
      <td><input type="button"value="6" @click="add('6')"></td>
      <td><input type="button"value="*" @click="add('*')"></td>
    </tr>

    <tr>
      <td><input type="button"value="1" @click="add('1')"></td>
      <td><input type="button"value="2" @click="add('2')"></td>
      <td><input type="button"value="3" @click="add('3')"></td>
      <td><input type="button"value="-" @click="add('-')"></td>
    </tr>

    <tr>
      <td><input type="button"value="0" @click="add('0')"></td>
      <td><input type="button"value="." @click="add('.')"></td>
      <td><input type="button"value="+" @click="add('+')"></td>
      <td><input type="button" value="=" v-on:click="result()" ></td>
    </tr>


  </テーブル>
</div>

2. CSS部分は、スタイルを気軽に書くだけなので、あまり重要ではありません

入力{
      幅: 100ピクセル;
      高さ: 100px;
      境界線: 1px 黒一色;
      行の高さ: 100px;
      テキスト配置: 中央;
      境界線の半径: 10px;
      背景色: ゲインズボロ;
      アウトライン: なし;
    }
    テーブル{
      背景色: #b3d7ff;
      マージン: 自動;
}

3. 最後に、VMインスタンスについて

var vm = 新しい Vue({
    el:"#ボックス",
    データ:{
      rel:"",

    },
    方法:{
       add(index){//これはキーバインディングメソッドで、取得した値を rel 文字列に連結します。this.rel +=index;
      },
      結果(){
        this.rel = eval(this.rel);//ここでは eval メソッドを使用した計算です this.rel = String(this.rel);//ここでの目的は、表示バーに数値または文字列を表示することです。文字列のみバックスペースしてゼロにリセットできます},
      del(){//これはバックスペース操作です。インターセプトには文字列の部分文字列メソッドを使用します。インターセプトは0番目から始まり、長さの前まで進みます。これはバックスペースに相当します。
      this.rel = this.rel.substring(0,this.rel.length-1);
      },
      clean(){//これはゼロ化の方法です。ゼロ化操作は、結果に空の文字列を割り当てることによって実現されます。もちろん、unshiftメソッドやpopメソッドなどの削除メソッドを使用することもできます。空の値を直接割り当てる方が簡単です。
         this.rel = "";
      }
    }
})

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

以下もご興味があるかもしれません:
  • Vue.js で実装された計算機機能の完全な例
  • Vue.js は価格計算機能を実装します
  • vue.js で実装された古典的な計算機/科学計算機機能の例
  • Vue を使用した簡単な計算機の実装
  • Vueは計算機機能を実装する
  • Vue.jsはシンプルな計算機能を実装します
  • Vueはシンプルな計算機を実装する
  • Vue.jsは3次元計算機を実装します
  • Vue がモバイル計算機を実装
  • Vueはシンプルな加算計算機を実装します

<<:  PSSHを使用してLinuxサーバーを一括管理する

>>:  Linux (Ubuntu) での MySQL 5.6.28 のインストールと設定のチュートリアル

推薦する

DockerコンテナのIPアドレスを取得する方法の詳細な説明

1.コンテナに入った後 /etc/hosts を cat するコンテナ自体の IP アドレスと (-...

rpm を使用して指定されたバージョンの docker (1.12.6) をインストールする詳細な手順

1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...

Vue で SVG アイコンを導入する 2 つの方法

Vue で SVG アイコンを導入する方法Vue で svg アイコンを導入する方法 1インストール...

Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策

この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...

nginx リバース プロキシの魔法のスラッシュについての簡単な説明

nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...

CSS フレックスレイアウトのリストの最後の行を左揃えにする N 通りの方法 (要約)

張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

MySQL 8.0.18 はクローンプラグインを使用して MGR 実装を再構築します

3 ノード MGR 内の 1 つのノードに異常があり、MGR クラスターに再度追加する必要があるとし...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

Linuxシステムの操作レベルの詳細な紹介

目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...