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番目に高い給与)
推薦する
SQL実行ステップの詳細な分析
SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...
vue data が関数である理由をご存知ですか?
公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...
VMware Workstation のインストール Linux (Ubuntu) システム
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
Linux sedコマンドの使用
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
jQueryのチェーンプログラミングスタイルの詳細な例
チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...
IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法
問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...
HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN
垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...
Ubuntuデュアルシステムが起動時に停止する問題の解決方法の詳細な説明
起動時に Ubuntu デュアル システムが停止する問題の解決方法 (Ubuntu 16.04 およ...
良いと思う国内のデザインサイトをいくつか選んでみました。
<br />私が良いと思った国内のデザインサイトをまとめてみました。広告ではありません！...
JavaScript 履歴オブジェクトの説明
目次1. ルートナビゲーション2. 履歴状態管理API （１）ハッシュチェンジイベント（２）ポップス...
Vueプロジェクトはログインと登録の効果を実現します
この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...
Nginx で HTTPS 証明書を構成する詳細なプロセス
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...
Apache での ModSecurity のインストール、有効化、および構成
ModSecurity は、Web サーバーに入るすべてのパケットをチェックする強力なパケット フィ...
Eclipse と IDEA 用に Tomcat サーバーを構成する方法
tomcat サーバーの構成誰もが Web について学習するときに、自分のツール用に Tomcat ...
CSS 3.0 テキストホバージャンプ特殊効果コード
これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下...