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番目に高い給与)
推薦する
VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル
目次1. はじめに2. Windows用Dockerをインストールする1. Windows用Dock...
WeChat ミニプログラム ユーザー認証のベストプラクティス ガイド
序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...
mysql5.5.28 のインストール チュートリアルは非常に詳細です。
参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...
Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)
この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...
プロフェッショナルなMySQL開発設計仕様とSQL記述仕様
チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...
TSオブジェクトのスプレッド演算子とレスト演算子の詳細な説明
目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...
TypeScript インターフェース定義ケースチュートリアル
インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...
Docker を使って LEMP 環境を素早く構築する方法の例
LEMP（Linux + Nginx + MySQL + PHP）は、基本的に今日のWeb開発者にと...
MySQLの数値型自動増分における落とし穴
テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...
HTML Web ページにおける URL の表現
HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...
ページを更新せずにフォームを送信するには iframe を使用します
そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...
MySQL データベースの必須条件クエリ ステートメント
目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...
Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...
Webアプリケーションにおけるコンテキストパスの設定の詳細な説明
URL: http://hostname.com/contextPath/servletPath/p...
ウェブページデザインのための4つの実践的なヒント
関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...