ตัวอย่างการใช้ v-if v-else ใน VueJs

มาดูตัวอย่างการใช้ v if, v else เพื่อทำ Conditional Rendering กันครับ

ซึ่งเป็นตัวอย่างที่ใช้บ่อยเหมือนกันสำหรับเงื่อนไขในการ rendering ไปดูตัวอย่างกัน

เราจะใช้ v-if เพื่อให้แสดงตามเงื่อนไข ตัวอย่างโค้ด

<h1 v-if="awesome">Vue is awesome!</h1>

จากตัวอย่าง h1 จะถูก rendered ก็ต่อเมื่อ awesome เป็น truthy ซึ่งถ้าค่า awesome เป็น false มันจะถูกลบออกจาก DOM

เรายังสามารถใช้ v-else และ v-else-if ได้ด้วย เพื่อแสดงเงื่อนไขอื่น ๆ ตามตัวอย่าง

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

ตัวอย่างโค้ดแบบเต็ม ๆ

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

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

ที่มา https://vuejs.org/tutorial/#step-6