この記事では、参考までに、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.コンテナに入った後 /etc/hosts を cat するコンテナ自体の IP アドレスと (-...
1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...
序文MySQL と Navicat をインストールした後、接続時に、ERROR 2059 (HY00...
Vue で SVG アイコンを導入する方法Vue で svg アイコンを導入する方法 1インストール...
この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...
nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...
張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって...
本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...
質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...
3 ノード MGR 内の 1 つのノードに異常があり、MGR クラスターに再度追加する必要があるとし...
目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...
目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...
バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...
目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...