Vueにおける条件付きグループ
時には、複数のタグに一度に条件を適用する必要があります。 その場合、それらを共通の親要素で囲み、その親に条件を適用することができます:
<template>
<div v-if="isAuth">
<p>+++</p>
<p>+++</p>
<p>+++</p>
</div>
</template>
タグを共通の親要素で囲みたくない場合もあります。
その場合、templateタグを使ってグループ化できます。
このタグは他のタグをグループ化しますが、最終的なレイアウトには現れません。
このタグに条件を適用してみましょう:
<template>
<template v-if="isAuth">
<p>+++</p>
<p>+++</p>
<p>+++</p>
</template>
</template>
3つの段落とボタンがあるとします。 ボタンをクリックすると、これらの段落が非表示になるようにしてください。