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番目に高い給与)
推薦する
MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード
序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...
簡単な計算機を実装する小さなプログラム
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...
Nginx 静的ファイル サービスの構成と最適化の詳細な説明
ルートディレクトリとインデックスファイルroot ディレクティブは、ファイルの検索に使用するルート ...
ウェブデザインの概要
<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...
MySQL トリガー: トリガーの作成と使用
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
Javascript の基礎: 演算子とフロー制御の詳細な説明
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
Zabbix設定 DingTalkアラーム機能実装コード
必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...
WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。
目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...
Vue3のサンドボックスの仕組みの詳しい説明
目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...
Linux の GRUB ブート プログラムの暗号化の概要
目次1. GRUB暗号化とは何か2. grub暗号化手順3. grub暗号化のロック属性1. GRU...
MySQL での utf8mb4 照合の例
MySQL における一般的な utf8mb4 ソート規則は次のとおりです。 utf8mb4_0900...
MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法
アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...
トランザクションとロックを表示するための MySQL の一般的なステートメント
データベース内のトランザクションとロックを表示するための一般的なステートメントトランザクションの待機...
TypeScript とは何ですか?
目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...
DockerコンテナでPythonを実行するディープラーニング環境を構築する方法
タスク マネージャーで仮想化を確認し、有効になっている場合は仮想化を、無効になっている場合はコンピュ...