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 の冗長インデックスと重複インデックスの詳細な説明
推薦する
JS での Reduce Fold Unfold の使用法の詳細な説明
目次折りたたむ（減らす） for...of の使用whileループの使用折り畳み実装に近い展開する配...
Linux で rpm パッケージを見つけるために CD をマウントする方法
前面に書かれたLinux を使用する際にソフトウェアをインストールする必要がある場合があります。もち...
Dayjs を使用して Vue で一般的な日付を計算する方法
vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要が...
MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...
Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題
目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...
UDP 接続オブジェクトの原理分析と使用例
以前、UDP を使い始めるために簡単な UDP サーバーとクライアントの例を作成しましたが、実際に使...
CentOS8.0 で FTP サーバーをインストールして設定する方法
CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...
Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明
1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...
HTML マーキータグの使用例
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...
Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
Vue3 Vue イベント処理ガイド
目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...
MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
Linux カーネルの copy_{to, from}_user() に関する考察
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
MySQLからMariaDBへのスムーズな移行のための詳細な手順
1. MariaDB と MySQL の紹介1. MariaDB の紹介MariaDB は、MySQ...
Windows での MySQL 5.7.10 のインストールと設定のチュートリアル
MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...