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 の varchar 型に関する注意点
varchar の保存ルール4.0 未満のバージョンでは、varchar(20) は 20 バイトを...
IE8 を IE7 スタイルコードを使用するように設定する
<meta http-equiv="x-ua-compatible" コン...
CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)
オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...
IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする
CSS3 の角丸や影の効果を使ったページを作りたいのですが、IE ブラウザでは対応していません。こ...
MySQL RouterはMySQLの読み取りと書き込みの分離を実装します
目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...
HTML のテキストエリアの改行問題の概要
最近、Textrea に転送したときに、データが本当に行ごとに保存できるかどうかという問題に遭遇しま...
HTML フレーム、Iframe、フレームセットの違い
10.4.1 フレームセットとフレームの違い まず、フレームセットとフレームの違いについて説明します...
Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体
シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...
Ubuntu 18.04で国内ソースを変更する方法の例
Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...
Reactプロジェクトで画像を導入するいくつかの方法
imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...
テーブルタグ（TAGS）の詳細な紹介
テーブルの基本構文<table>...</table> - テーブルを定義し...
Vue がコンポーネント間の通信を実現するいくつかの方法 (複数のシナリオ)
目次1. 小道具親 >>> 子 (Props)子 >>> 親 (...
Docker ファイルの保存パス、ポート マッピング操作モードの変更
コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ（データが...
要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解
CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:cen...
MySQLでよく使われる4つのストレージエンジンについて簡単に説明します。
よく使われる4つのMySQLエンジンの紹介（１）：MyISAMストレージエンジン：トランザクションや...