Vueはシンプルな計算機能を実装します
|
この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 機能: 2つの入力ボックスの値を加算、減算、乗算、除算します 使用される知識ポイント: 1. v-modelデータの双方向バインディング 2. .numberは数値に変換されます 3.@click クリックイベント
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
// 独自の vue の場所を選択します <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<本文>
<div id="ボックス">
<!-- 最初の値を数値に変換します -->
<input type="number" v-model.number="num1"/>
<v-model="str">を選択します
<オプション値="+">+</オプション>
<オプション値="-">-</オプション>
<オプション値="*">*</オプション>
<オプション値="/">/</オプション>
</選択>
<input type="number" v-model.number="num2"/>
<!-- 等号をクリックすると、cal 関数の内容が実行されます -->
<button type="button" @click="calc">=</button>
<!-- 結果を出力する -->
<input type="text"/ v-model="num3">
</div>
</本文>
<script type="text/javascript">
var vm = 新しい Vue({
el:"#ボックス",
データ：{
// 入力ボックスの初期値 num1: 0,
番号2:0,
番号3:0,
文字列:'+'
},
方法:{
計算(){
if(this.str=="+"){
this.num3=this.num1+this.num2
}それ以外の場合(this.str=="-"){
this.num3=this.num1-this.num2
}それ以外の場合(this.str=="*"){
this.num3=this.num1*this.num2
}それ以外の場合(this.str=="/"){
this.num3=this.num1/this.num2
}
}
}
})
</スクリプト>
</html>結果：
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: SQL実装 LeetCode (176. 2番目に高い給与)
推薦する
Oracle Rownum 書き込みに似た MySQL の詳細な例
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
jQueryは時間セレクタを実装する
この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...
21 の MySQL 標準化および最適化のベスト プラクティス!
序文良い習慣はすべて宝物です。この記事は、SQL の後悔の治療法、SQL パフォーマンスの最適化、S...
CSS の vertical-align プロパティとベースラインの問題に関する深い理解
vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...
Vueはミックスインを使用してコンポーネントを最適化します
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
JavaScript を使用したコマンドライン アプリケーションの構築
目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...
SNMP4J サーバー接続タイムアウト問題の解決策
弊社のネットワーク管理センターは管理センター兼サーバーとして機能します！各管理対象デバイスは、TCP...
JavaScript カスタム カレンダー効果
この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...
JS ループで async と await を正しく使用する方法
目次概要（ループモード - 共通）配列と非同期メソッドを宣言して反復するforループで使用するマップ...
CSS における px、rem、em、vh、vw の違いを簡単に分析します
絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...
Linuxでのaliasコマンドの使い方の詳細な説明
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
VMware15/16 VMwareのロックを解除してMacOSをインストールする詳細な手順
VMware バージョン: VMware-workstation-full-16 VMware バー...
MySQL 8.0.26 のインストールと簡易チュートリアル (インターネット上で最も完全)
目次1. MySQLをダウンロードする1.1 ダウンロード1.2 インストール1. MySQLをダウ...
MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)
この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...
知っておくべき 18 の Web ユーザビリティの原則
世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移...