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

v-ifv-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。 <h1 v-if="awesome">Vue is awesome!</h1> これは、v-else で “else ブロック” を追加することも可能です: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> テンプレートでの v-if による条件グループv-if はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか？このケースでは、非表示ラッパー (wrapper) として提供される、<template> 要素で v-if を使用できます。最終的に描画される結果は、<template> 要

[hujuu]

“v-if”

[reboot_in]

“v-else 要素は、v-if または v-else-if 要素の直後になければなりません。それ以外の場合は認識されません。”

[nilab]

「非表示ラッパー (wrapper) として提供される、<template> 要素で v-if を使用できます。最終的に描画される結果は、<template> 要素は含まれません」「v-show による要素は常に描画されて DOM に維持」「v-if は 遅延描画 (lazy) です」

[okumuraa1]

ありがとうございますm(_ _)m

[coffexpr]

“非表示ラッパー (wrapper) として提供される、<template> 要素で v-if を使用できます。”

[tvsk]

“一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。”

[keisuke_ohta]

“一般的に、v-if はより高い切り替えコストを持っているのに対して、v-show はより高い初期レンダリングコストを持っています。そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更す