vue が要素の表示と非表示を実装する方法 (v-if と v-show を比較)

Vue.js は、ユーザー インターフェイスを作成するための進歩的なフレームワークです。 Vue には多くの高度な機能があり、要素の表示と非表示もその 1 つです。この関数の実装原理は実は非常にシンプルですが、Vue初心者にとっては戸惑う方も多いのではないでしょうか?この記事ではVueで要素を表示・非表示にする方法を詳しく紹介します。

1. v-if ディレクティブ

Vue で要素を表示および非表示にする最も基本的な方法は、v-if ディレクティブを使用することです。 v-if ディレクティブでは、非表示または表示する要素に条件を追加する必要があります。要素は条件が true の場合にのみ表示され、それ以外の場合は非表示になります。例:

<div v-if="show">这是一个需要显示或隐藏的元素</div>

上の例では、show という名前の変数を定義しました。この div 要素は、show の値が true の場合にのみ表示されます。 show の値が false の場合、この要素は非表示になります。

2. v-show ディレクティブ

v-if ディレクティブに加えて、Vue には要素を表示および非表示にするためのディレクティブ、つまり v-show ディレクティブもあります。 v-if ディレクティブとは異なり、v-show は DOM から要素を削除しませんが、要素の CSS プロパティ表示を none に設定するため、要素はページに表示されません。

例:

<div v-show="show">这是一个需要显示或隐藏的元素</div>

上の例では、show の値が true の場合、div 要素がページに表示され、display の値が block に設定されます。 show の値 値が false の場合、div 要素はページに表示されず、display の値は none になります。

v-show ディレクティブを使用する場合、要素は引き続き DOM 内に配置されることに注意してください。これは、依然としてページ上のスペースを占有していることを意味します。したがって、ページ上で完全に削除する必要がある場合は、v-if ディレクティブを使用する必要があります。

3. v-if 命令と v-show 命令の比較

v-if 命令と v-show 命令の実装原理は上で簡単に紹介しました。しかし、要素に表示機能または非表示機能を追加する必要がある場合、どのディレクティブを選択すればよいでしょうか?

まず、ドキュメントのロード時に特定の要素を条件付きで非表示または表示する必要がある場合は、v-if ディレクティブを使用する必要があります。これは、v-if ディレクティブが DOM から要素を削除するため、v-show ディレクティブのようにページ領域を占有しないためです。したがって、ページの読み込み時に複雑な初期化ロジックを追加する必要がある場合は、v-if ディレクティブを使用することをお勧めします。

2 番目に、要素を複数回表示および非表示にする必要がある場合は、v-show ディレクティブを使用する必要があります。これは、v-show ディレクティブを使用すると、ページの再描画が発生してパフォーマンスに影響を与える要素の再作成と破棄を繰り返すことを回避できるためです。

最後に、v-if または v-show を使用するときに条件判断を行う必要がある場合、これら 2 つの命令の論理式を使用して条件判断を行う必要があります。このようにして、コード内でそれらを柔軟に使用し、より柔軟で強力な Vue アプリケーションを作成できます。

概要:

Vue で要素を表示および非表示にするのは非常に簡単です。これを実現するには、v-if または v-show ディレクティブを使用するだけです。ドキュメントの読み込み中に特定の要素を表示または非表示にする必要がある場合は、v-if ディレクティブを使用する必要があります。要素を複数回表示および非表示にする必要がある場合は、v-show ディレクティブを使用する必要があります。これら 2 つの命令を使用する場合、これら 2 つの命令の論理式を条件判断に使用する必要があります。そうすることで、これらの命令をコード内で柔軟に使用して、より柔軟で強力な Vue アプリケーションを作成できるようになります。

以上がvue が要素の表示と非表示を実装する方法 (v-if と v-show を比較)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。