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番目に高い給与)
推薦する
少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ
テーブルを作成するテーブル order(id varchar(10),date datetime,o...
jQueryはすべての選択と逆選択操作ケースを実装します
この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...
JavaScriptのアロー関数の特徴と通常の関数との違い
目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...
史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)
データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...
デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント
Web デザイナーの頭の中には、仕事に関連する多くの知識が詰まっている必要があります。 CSS は、...
ボタンの権限判定を実装するためのVueカスタムv-has命令
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
MySQL 5.7 のインストールと設定の詳細な手順
1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...
nginx 用の zabbix 5.0 をインストールして展開する方法
目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...
HTMLフォーム入力監視の詳細な理解
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント：関数 c...
MySQL における Decimal 型と Float Double 型の違い (詳細説明)
MySQL には、10 進数などの標準データ型だけでなく、float や double などの非標...
MySql の null 関数の使用の共有
MySql の null に関する関数IFNULL ISNULL NULLIF IFNULL使用法:...
JavaScript配列重複排除の詳細な説明
目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...
MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル
目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...
MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
MySQL ルートパスワードエラー番号 1045 の解決方法
MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...