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 のクラスター化インデックスとクラスター化インデックスの成長の仕組みを理解する
このノートでは、 MySQL の B+Tree インデックスとは何ですか?クラスター化インデックスは...
血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS
結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...
MySQL <> および <=> 演算子の紹介
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
JavaScript ではおそらく switch 文を使う必要はない
目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...
MySQL 外部キー制約の詳細な説明
公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...
MySQL データ ウェアハウスを保護するための 5 つのヒント
さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...
MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法
次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...
ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策
目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...
CSS3 のフィルタプロパティの使用に関する詳細な説明
最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...
ElementUI コンポーネント el-dropdown (落とし穴)
選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...
両端揃えレイアウトを実現する CSS 列のサンプルコード
1. 堂々巡りいろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS ...
MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック
MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...
Linux の高性能ネットワーク IO と Reactor モデルの分析
目次1. 基本概念の紹介2. ネットワークIOの読み取りと書き込みのプロセス3. 5つのLinuxネ...
Javascript で SessionStorage と LocalStorage を使用する方法
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。
基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...