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 のインストールと設定のチュートリアル

推薦する

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...

Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します

背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

mysql-8.0.11-winx64.zip の詳細なインストール チュートリアル

zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...

Docker、Nginx、Jenkins をベースにした自動フロントエンド デプロイメント

目次事前準備展開ターゲットDocker環境構築クラウドサーバーに接続Docker環境をインストールす...

CSSタグの表示モードの詳細な説明

ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...

Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...

MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する

SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...

大規模なデータテーブルのコピー効率を向上させるMySQLソリューション

序文この記事では主に、MySQL で大規模なデータ テーブルのコピーの効率を向上させることに関する関...

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...