v-if、v-show、v-else、v-else-ifを使用したVueでの条件付きレンダリング/表示

概要

Vue.js は、動的な Web インターフェイスを作成するためのシンプルな Web アプリ フレームワークです。 シングルページ アプリ (SPA)。 これらのアプリを作成するとき、多くの場合、次のことが必要になります。 特定の基準に基づいて何かをレンダリングする – これが条件付きレンダリングの本質です。

条件付きレンダリングとは、条件が true かどうかに基づいて個別のユーザー インターフェイス (UI) マークアップをレンダリングする機能を指します。 この概念は、コンポーネントの表示または非表示 (切り替え)、アプリケーション機能の切り替え、認証と認可の処理などのコンテキストで頻繁に使用されます。

この記事では、Vue.js で条件付きレンダリングを行うさまざまな方法を見ていきます。 v-if, v-else-if, v-else 指令。 また、いくつかの例を見て、 v-if および v-show.

v-if

　 v-if ディレクティブは次の目的で使用されます 条件付きでブロックをレンダリングする のブロックを意味します v-if 属性はのみになります 生産 ディレクティブの式が true 価値。 式が無効な結果を生成した場合 (たとえば、 null, 0、空の文字列、 false)、要素は 削除された DOMから。

この動作を実際の例で説明してみましょう。

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Since login に設定されています true <div> を含むブロック v-if ディレクティブが生成され、表示されます。

v-if vs vショー

注目に値する v-show は上記の例でも機能し、一見同じように機能しますが、この XNUMX つには違いがあります。

v-if 条件付きでレンダリングします 要素であるのに対し、 v-show 条件付きで表示/表示 要素。

これは、条件が切り替えられると、 v-if 実際にコンポーネントを削除して復元します v-show それらを非表示または表示にするだけです。 次のアニメーションはその方法を示しています。 v-if 実際にコードブロックを削除して再作成します。

一方、 v-show 要素は常に DOM 内に維持され、CSS を変更して外観を切り替えるだけです (要素を設定することで) display 〜へ none):

v-その他

　 v-else ディレクティブは v-if をカスタマイズできるディレクティブ false 条件付きレンダリングの値。そうでない場合 trueは、使用することができます v-else 代わりに何が起こるべきかを定義します。

たとえば、パスワードを入力し、エラー メッセージを生成したいとします。 "弱いパスワード"、入力の長さが 6 未満であるか、表示される場合 「強力なパスワード」 長さが 6 より大きい場合。

これは、 false の場合を処理するオプションを備えた条件付きレンダリングです。

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

これを利用して、単純なログイン ページのコンテンツを切り替えて、ユーザーがログインしているかどうかに基づいてメッセージを変更してみましょう。に基づいてボタンの文言を変更します。 userLoggedIn ステータスも:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

ボタンのクリックイベントにより、 userLoggedIn これは、以下に示すように表示されるデータに影響します。

v-else-if

v-else-if extends a v-if ととも​​に else...if ブロック。これはJavaScriptに似ています else...if 既存のブロックに if ステートメントを追加できるという点で、 v-if。 これは、チェックする基準が多数あり、複数回連鎖させることができる場合に使用されます。

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

まとめ

この記事では、要素を条件付きでレンダリングする方法について説明しました。 v-if, v-else, v-else-if。 の違いについても説明しました v-if および v-show.

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• 出典: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/