1. 動詞-ifテンプレートでは、条件に応じてレンダリングできます。条件は、 サンプルコードは次のとおりです。 <div id="アプリ"> <p v-if="weather == 'sun'">今日は公園に行きましょう! </p> <p v-else-if="weather == 'rain'">今日は映画を見に行きましょう! </p> <p v-else>今日はどこにも行きません! </p> </div> <スクリプト> vm = new Vue({ el: "#app", データ: { 天気: '太陽' } }); </スクリプト> 2. <template> で v-if を使用する場合によっては、1 つの条件で複数の サンプルコードは次のとおりです。 <div id="アプリ"> <テンプレート v-if="年齢<18"> <p>数学は何点ですか? </p> <p>英語の点数はいくつですか? </p> </テンプレート> <テンプレート v-else-if="年齢>=18 && 年齢<25"> <p>あなたは結婚していますか? </p> <p>大学院入試は受けましたか? </p> </テンプレート> <テンプレート v-else> <p>給料は上がりましたか? </p> <p>給料はいくらですか? </p> </テンプレート> </div> <スクリプト> vm = new Vue({ el: "#app", データ: { 年齢: 24 } }); </スクリプト> 3. キーを使用して再利用可能な要素を管理するさらに、テンプレートでは、 ユーザーがさまざまなログイン方法を切り替えることができるようにする場合: <div id="アプリ"> <テンプレート v-if="ログインタイプ === 'ユーザー名'"> <label for="username">ユーザー名:</label> <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名"> </テンプレート> <テンプレート v-else> <label for="email">メール</label> <input type="text" id="email" name="email" placeholder="メールアドレス"> </テンプレート> <div> <button @click="changeLoginType">ログインタイプを切り替える</button> </div> </div> <スクリプト> constアプリ = 新しいVue({ el: "#app", データ: { ログインタイプ: "ユーザー名" }, メソッド: { ログインタイプを変更する(){ // タイプがユーザー名の場合はメールに切り替え、それ以外の場合は this.loginType = this.loginType==="username"?"email":"username"; } } }) </スクリプト> 次に、効果図を見てみましょう。 ここで問題が発生します。 サンプルコードは次のとおりです。 <div id="アプリ"> <テンプレート v-if="ログインタイプ === 'ユーザー名'"> <label for="username">ユーザー名:</label> <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名" key="ユーザー名"> </テンプレート> <テンプレート v-else> <label for="email">メール</label> <input type="text" id="email" name="email" placeholder="Email" key="email"> </テンプレート> <div> <button @click="changeLoginType">ログインタイプを切り替える</button> </div> </div> ユーザー名
4. Vショー条件付きで要素を表示するための別のオプションは <h1 v-show="ok">こんにちは!</h1> 違いは、
4.1 v-if と v-show それに比べて、 一般的に、 これで、vue 条件付きレンダリング v-if と v-show に関するこの記事は終了です。vue 条件付きレンダリングに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...
はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...
Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...
HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...
導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...
この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...
1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...
Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...
説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...
はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...
目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...
ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...