Vueはログインタイプの切り替えを実装します
|
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 操作効果
コード
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ログインタイプの切り替え</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<本文>
<div id="アプリ">
<span v-if="isUser">
<label for="userAccount">ユーザーアカウント:</label>
<input type="text" id="userAccount" placeholder="アカウントを入力してください" key="userAccount">
</span>
<span v-else>
<label for="userEmail">ユーザーメール:</label>
<input type="text" id="userEmail" placeholder="メールアドレスを入力してください" key="userEmail">
</span>
<button @click="changeType">タイプを切り替える</button>
</div>
</本文>
<スクリプト>
constアプリ = 新しいVue({
el: '#app',
データ： {
ユーザー: true
},
方法:{
変更タイプ(){
this.isUser = !this.isUser を返します
}
}
})
</スクリプト>
</html>コードスニペット分析
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker パッケージング ノード プロジェクトのプロセスの説明
>>: MySQL の冗長インデックスと重複インデックスの詳細な説明
推薦する
MySQLで最大接続数を達成する方法
目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...
vscodeカスタムvueテンプレートの実装
vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...
Vue3.xはコンポーネント通信にmitt.jsを使用します
目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...
Dockerでコンテナを作成するときのディレクトリ権限
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
MySQL オンライン DDL ツール gh-ost 原理分析
目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...
node.js グローバル変数の具体的な使用法
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
Nginxの書き換えモジュールの詳細な説明
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
優れたグラフィックデザイナーが習得すべき7つのスキル
1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...
JavaScript 配列を走査する 5 つの方法
目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...
Linuxでのaliasコマンドの使い方の詳細な説明
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
CSS シャドウ効果の比較: ドロップシャドウとボックスシャドウ
Drop-shadow と box-shadow はどちらも影効果（ハロー効果）のための CSS プ...
ホストがアクセスできるようにMySQLの権限を変更する方法
mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...
JavaScriptで計算機機能を実現するプロセスの詳細な説明
目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...
Mysql 8.0.18 ハッシュ結合テスト (推奨)
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法
実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...