กลุ่มเงื่อนไขใน Vue

บางครั้งเราต้องการกำหนดเงื่อนไข ให้กับกลุ่มแท็กหลายอันพร้อมกัน ใน กรณีนี้ เราสามารถรวมพวกมันด้วย ตัวแม่ทั่วมารวมกันและกำหนด เงื่อนไขให้กับตัวแม่นั้น:

<template>
	<div v-if="isAuth">
		<p>+++</p>
		<p>+++</p>
		<p>+++</p>
	</div>
</template>

บางครั้งเราไม่ต้องการรวมแท็กด้วย ตัวแม่ร่วม ในกรณีนี้ สามารถรวมพวกมันด้วยแท็ก template แท็กนี้จะรวมแท็กอื่นๆเข้าด้วยกัน แต่จะไม่ปรากฏในโครงสร้าง HTML สุดท้าย มาลองกำหนดเงื่อนไขให้กับแท็กนี้:

<template>
	<template v-if="isAuth">
		<p>+++</p>
		<p>+++</p>
		<p>+++</p>
	</template>
</template>

สมมติว่าคุณมีสามย่อหน้าและปุ่มหนึ่งปุ่ม ทำให้เมื่อกดปุ่ม ย่อหน้าเหล่านี้ซ่อนหายไป