この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な内容は次のとおりです。 機能紹介 1. 加算、減算、乗算、除算が実現可能 レンダリングは平均的で、スタイルはランダムで、主に機能と実装方法に焦点を当てています コードと説明 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux (Ubuntu) での MySQL 5.6.28 のインストールと設定のチュートリアル
目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...
序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...
背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...
この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...
zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...
目次事前準備展開ターゲットDocker環境構築クラウドサーバーに接続Docker環境をインストールす...
ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...
序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...
SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...
序文この記事では主に、MySQL で大規模なデータ テーブルのコピーの効率を向上させることに関する関...
セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...
この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...
Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...