简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > Vue.js > 本文

Vue 条件付きレンダリング実践ガイド: v-if、v-show、v-else、v-else-if の使用テクニックを詳しく解説

WBOY
リリース： 2023-09-15 11:46:51
オリジナル
998 人が閲覧しました

Vue 条件付きレンダリング実践ガイド: v-if、v-show、v-else、v-else-if の使用テクニックを詳しく解説

Vue 条件付きレンダリング実践ガイド: v-if、v-show、v-else、v-else-if

Vue の使用スキルの詳細な説明。 js は、さまざまな条件に基づいて特定の要素を表示または非表示にする柔軟な条件付きレンダリング命令を提供する、インタラクティブなフロントエンド インターフェイスを構築するためのオープン ソース JavaScript フレームワークです。 Vue では、v-if、v-show、v-else、v-else-if は、一般的に使用される条件付きレンダリング命令の 1 つです。この記事では、これらのディレクティブの使用法について詳しく説明し、対応するコード例を示します。

  1. v-if と v-else

v-if ディレクティブは、条件に基づいて特定の要素をレンダリングするために使用されます。条件が true の場合、要素はレンダリングされます。条件が false の場合、要素はレンダリングされません。

例 1:

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

上記の例では、 show 変数の値に応じて、show が true の場合は「h1」要素のテキストが表示され、show が false の場合は「p」要素のテキストが表示されます。

v-else ディレクティブは v-if の後に使用され、同じラベル内ですぐに使用して v-if とは逆の条件を表現できます。

例 2:

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

上記の例では、 show の値が true の場合、「h1」要素のテキストが表示され、show の値が false の場合、「h3」要素のテキストが表示されます。

  1. v-show

v-show コマンドは v-if に似ており、特定の条件下で要素の表示と非表示を制御するためにも使用されます。違いは、v-show では要素を直接削除したり追加したりするのではなく、CSS の display 属性を利用して要素の表示・非表示を切り替えている点です。

例 3:

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

上記の例では、 show の値が true の場合、「h1」要素のテキストが表示され、show の値が false の場合、「p」要素のテキストが表示されます。

  1. v-else-if

v-else-if ディレクティブは v-else ディレクティブに似ていますが、複数の連続した条件を設定できます。 v-if ディレクティブや v-else ディレクティブを使用する場合に非常に便利です。

例 4:

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！