Vue.js 条件付きレンダリングと V-if と V-show

私の記事が気に入ったら、コーヒーをおごってください :)
コーヒー買ってきて

Vue.js 条件付きレンダリング

v-if および v-show ディレクティブは、Vue.js でブロックを条件付きでレンダリングするために使用されます。

v-if

vue.js では、ディレクティブ v-if はブロックを条件付きでレンダリングするために使用されます。ブロックは、ディレクティブの式が真の値を返した場合にのみレンダリングされます。

例 :

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

v-else ディレクティブを使用して、v-if の「else ブロック」を示すことができます。 v-if ディレクティブ 式が true を返さない場合、v-else ブロックがレンダリングされます。

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-else-if

v-else-if は、v-if の 「else if ブロック」 として機能します。複数回連鎖させることも可能です。 v-if と v-else-if が true と評価されない場合、v-else ディレクティブがトリガーされます。

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

Vショー

項目を条件付きで表示したい場合は、別のオプションとして v-show ディレクティブを使用できます。

<h1 v-show="ok">Ok!</h1>

違いは、v-show を持つ要素は常にレンダリングされ、DOM に残ることです。 v-show は、CSS 表示プロパティを変更して要素を表示または非表示にします。 v-show は v-else では機能しません

v-if と v-show

v-if は、条件付きブロック内のイベント リスナーと子コンポーネントがトグル中に適切に破棄され、再作成されることが保証されるため、「実際の」条件付きレンダリングです。

v-if : 最初のレンダリング時に条件が false の場合、何も行われません。条件付きブロックは、条件が初めて true になるまでレンダリングされません。

v-show は常にレンダリングされ、DOM に残ります。 v-show は、CSS 表示プロパティを変更して要素を表示または非表示にします。 v-show は v-else では機能しません

v-if は切り替えコストが高くなりますが、v-show は初期レンダリング コストが高くなります。頻繁に何かを切り替える必要がある場合は v-show を使用し、実行時に条件が変化する可能性が低い場合は v-if を使用します。

結論

この記事では、v-if ディレクティブと v-show ディレクティブの機能と違いを調べました。これらの違いを理解することは、Vue.js アプリケーションでレンダリング パフォーマンスを最適化し、要素の可視性を管理するために不可欠です。

以上がVue.js 条件付きレンダリングと V-if と V-showの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。