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() {</script>

return {
  show: true
}

}
}

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

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

例 2:

<script><br>export default {<br> data() {</script>

return {
  show: true
}

}
}

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

2. v-show

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

例 3:

<script><br>export default {<br> data() {</script>

return {
  show: true
}

}
}

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

3. v-else-if

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

例 4:

<script><br>export default {<br> data() {</script>

return {
  score: 85
}

}
}

上記の例では、変数スコアの値に基づいて、さまざまなレベルのテキストを表示します。スコアの値に応じて、まず90以上かどうかを判定し、90以上であれば「h1」要素のテキストを表示し、そうでない場合は80以上かどうかを判定し、そうであれば表示します。 「h2」要素内のテキストなど。

要約すると、v-if、v-show、v-else、v-else-if は、Vue.js で一般的に使用される条件付きレンダリング命令です。実際の状況に基づいて目的の効果を達成するために使用するディレクティブを選択し、必要に応じて要素を表示または非表示にすることができます。コードを記述する場合、これらの命令を合理的に使用すると、コード構造が最適化され、コードの可読性と保守性が向上します。この記事が Vue 開発に役立つことを願っています。

(注: 上記のコード例は参考用です。使用する場合は実際の状況に応じて変更してください)

以上がVue 条件付きレンダリング実践ガイド: v-if、v-show、v-else、v-else-if の使用テクニックを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。