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 の冗長インデックスと重複インデックスの詳細な説明
推薦する
HTML タグ tbody の使い方と説明
tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用する必要があります...
Vue プロジェクトにおけるトランジション コンポーネントの適用の概要
Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般...
CSS 画面サイズ適応実装例
CSS 画面サイズの適応を実現するには、まず CSS3 @media メディア クエリを導入する必要...
携帯電話向けウェブページ作成のヒント
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...
MySQL における distinct と group by の違い
簡単に言うと、distinct は重複を削除するために使用され、group by は統計を集計するよ...
JavaScript を使用してページに動的な検証コードを実装する例
導入：現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...
Docker用国産イメージウェアハウスの使い方
1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...
Web プロジェクトでの SQL インジェクションの防止
目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...
React でのポータルとエラー境界処理の実装
目次ポータルエラー境界処理エラー境界を使用しない場合はどうなりますか?注記ポータルスロットとも言えま...
複数人チャットルームを実現する js コード
この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...
MySQL データベース開発仕様 [推奨]
最近、問題のある新しい SQL が本番データベースに入力される数を最小限に抑えるために、開発仕様を整...
MYSQL から MARIADB へのプロジェクト移行に関するチュートリアル
データベース (MySQL) を準備します。すでに MySQL をお持ちの場合は、これを無視できます...
jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。
インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...
テーブルレイアウトの長所と短所、そして推奨されない理由
テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...
mysql8.0 でユーザーを作成して権限を付与する際のエラーの解決方法の詳細な説明
質問1:エラーを報告する書き込み方法: GRANT OPTION を使用して、'123123...