การใช้ Directive เงื่อนไข กับการ render แสดงผล ใน VueJS

บทความใหม่ ไม่กี่เดือนก่อน โดย Ninenik Narkdee
v if template conditional rendering vuejs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ v if template conditional rendering vuejs

ดูแล้ว 292 ครั้ง


ในเนื้อหาที่ผ่านมา เราได้พูดถึง Built-in Directives ไปบ้างแล้ว โดยเฉพาะ
สามารถกลับไปทบทวนได้ที่บทความ 
 
ทำความรู้จัก Attribute Bindings และ Directives ใน VueJS http://niik.in/1085 
 
โดยใน Built-in Directives ที่ใช้สำหรับกำหนดเงื่อนไขการ render เพื่อแสดงในส่วนของ
template รูปแบบเงื่อนไขจะไม่ยุ่งยาก เหมือนโครงสร้าง control flow ของการเขียนโปรแกรม
ทั่วไปที่ทุกคนน่าจะคุ้นเคยกันแล้ว ในเนื้อหานี้เราจะมาดูเกี่ยวกับ directive ต่อไปนี้เพิ่มเติม
 

Directive สำหรับกำหนดเงื่อนไข กับการ render หรือการแสดงผล

v-if: ใช้เพื่อแสดงหรือซ่อน element ขึ้นอยู่กับเงื่อนไขที่กำหนด ในรูปแบบการเพิ่ม หรือ ลบ
DOM เข้ามาใน template  ไม่ใช่ก่อนซ่อนด้วย css style
v-show: ใช้เพื่อแสดงหรือซ่อน element โดยอ้างอิงกับเงื่อนไขที่กำหนด แตกต่างจาก v-if 
โดยวิธีการทำงาน โดยจะเป็นการซ่อนด้วย css style display โดยที่ไม่ได้ลบ DOM ออกจาก
template ที่แสดง เพียงแต่เป็นการซ่อนไว้
v-else-if: ใช้ในการกำหนดเงื่อนไขเพิ่มเติมในการตรวจสอบหลายเงื่อนไขเมื่อใช้ร่วมกับ v-if 
และ v-else
v-else: ใช้ในการกำหนดส่วนของเทมเพลตที่จะแสดงเมื่อเงื่อนไขของ v-if หรือ v-else-if 
ก่อนหน้านั้นไม่เป็นเท็จ (false)
v-for: ใช้สำหรับการทำซ้ำ element โดยอ้างอิงจากข้อมูลในอาร์เรย์หรือออปเจ็กต์
 

เปรียบเทียบ Control Flow ในการเขียนโปรแกรม 

 
if(){ // เงื่อนไขเริ่มต้น

}else if(){ // เงื่อนไขเพิ่มเติม

}else{ // ไม่เข้าเงื่อนไขที่กำหนด

}
 

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

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

const type = ref("A")
</script>

<template>
<button @click="type = 'A'">A</button>
<button @click="type = 'B'">B</button>
<button @click="type = 'C'">C</button>
<button @click="type = 'D'">D</button>

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
</template>
 
เมื่อเริ่มโหลด จะมีแค่ div ที่มีตัว A อยู่แสดง เพราะค่าเริ่มต้นเรากำหนดค่า type เท่ากับ A
และเราให้มีเหตุการณ์ถ้าคลิกที่ปุ่มต่างๆ จะเปลี่ยนค่า type เป็นค่านั้น ซึ่งจะมีผลต่อเงื่อนไข
การแสดง โดย div จะแสดงเป็นมีข้อความเป็น A B หรือ C ถ้ากดที่ปุ่มอักษรต่างๆ แต่ถ้ากดปุ่ม
D จะเข้าเงื่อนไขสุดท้าย แสดงข้อความ Not A/B/C เพราะค่า type เป็น D นั่นเอง
 
ในการสร้างเงื่อนไขแบบ switch หรือปุ่มซ่อน แสดง ตามเงื่อนไขค่า จริงหรือเท็จ เราสามารถใช้
รูปแบบดังนี้ได้
 
<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no &#128546;</h1>
</template>
 

ผลลัพธ์ที่ได้
 

 


 
 
สังเกตว่า ใน DOM จะเป็นแสดงเฉพาะ div ที่มีค่า expression เข้าเงื่อนไข
แต่เมื่อเราคลิกที่ปุ่ม สลับค่า หรือปุ่ม toggle ผลลัพธ์ ก็จะได้เป็น


 


 
 
ตัว DOM ของค่าเดิมจะถูกลบออกไป และแสดงด้วย DOM ใหม่ที่เข้าเงื่อนไข
 
ดูส่วนของการกำหนด เงื่อนไขการทำงาน หรือ expression ให้กับเหตุการณ์หรือ event
เมื่อคลิก โดยใช้รูปแบบ ให้ค่า เปลี่ยนเป็นค่าตรงข้าม ทุกครั้งที่คลิก  ดังนั้น ค่าของ state ก็จะ
สลับไปมา จริง เท็จ สลับกัน ทุกครั้งที่กดปุ่ม
 
<button @click="awesome = !awesome">Toggle</button>
 

การทำงานของ v-show 

ทีนี้เรามาดูการทำงานของ v-show บ้าง แก้โค้ดข้างต้นเล็กน้อย จะได้เป็นดังนี้
 
<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">Toggle</button>
  <h1 v-show="awesome">Vue is awesome!</h1>
  <h1 v-show="!awesome">Oh no &#128546;</h1>
</template>
 

ดูผลลัพธ์ค่าเริ่มต้น




 
 
สังเกตว่า DOM ของ h1 ทั้งแสดงตัวแสดงใน template แต่ตัวที่เข้าเงื่อนไขค่า false จะถูก
ซ่อนด้วยรูปแบบ css style display เป็น none และเมื่อเรากดที่ปุ่มเพื่อเปลี่ยนค่า state ของ
awesome ผลก็จะได้เป็นดังนี้

 
 



 
 
ตัว css style display จะซ่อนค่าที่เข้าเงื่อนไข โดยที่ทั้งสอง element ยังอยู่ใน template
ซึ่งต่างจากการใช้งาน v-if ที่เป็นซ่อนหรือแสดงในลักษณะการเพิ่ม หรือ ลบ  DOM element 
ออกจาก template ดังนั้น เราอาจจะกล่าวได้ว่า v-if เป็นเงื่อนไขการ render ที่แท้จริง เพราะ
มีทั้งการลบ และสร้างใหม่ เพิ่มเข้ามาใน template  
สำหรับ v-show จะเหมาะสำหรับการกำหนดให้กับส่วนที่จำเป็นต้องซ่อนหรือแสดงบ่อย เพราะจะ
ได้ลดการทำงานซ้ำๆ บ่อยๆ หากใช้ v-if ที่มีการสร้างใหม่และลบ ถือเป็นต้นทุนการทำงานหรือ
ใช้ทรัพยากรมากกว่า
 
เนื้อหาตอนหน้าเราติดค้างเกียวกับ v-for มารอดูต่อ ติดตามได้ในบทความถัดไป


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 14-05-2024


การใช้ v-if บน <template>

ก่อนจะอธิบายรายละเอียด เพิ่มเติม เรามาทำความเข้าใจกับ template tag ใน vuejs 
กันก่อนว่าคืออะไร และใช้ทำอะไร 
 
ใน Vue.js, แท็ก <template> ใช้เป็นตัวคอนเทนเนอร์สำหรับโค้ดของ Vue template 
ซึ่งแท็กนี้จะไม่ถูกเรนเดอร์ออกมาในผลลัพธ์สุดท้าย แต่สามารถเก็บส่วนของ HTML ที่ Vue 
จะประมวลผลและเรนเดอร์ใน DOM ได้ แท็ก <template> นี้มีประโยชน์เป็นพิเศษสำหรับ
การจัดกลุ่มหลายๆ อิลิเมนต์หรือการแสดงผลตามเงื่อนไข (conditional rendering) 
ซึ่งถ้าเราต้องการคลุมหลายอิลิเมนต์โดยไม่ต้องเพิ่มอิลิเมนต์ DOM เพิ่มเติม
 

การใช้งานหลักของแท็ก <template> ใน Vue.js

 
1.การจัดกลุ่มหลายอิลิเมนต์:
เมื่อเราต้องการผูก (bind) หรือวนลูป (loop) หลายอิลิเมนต์แต่ไม่ต้องการเพิ่มอิลิเมนต์ 
wrapper ลงใน DOM หรือก็คือไม่ต้องการเพิ่ม  div เข้าไปคลุมอีกที
 
<template v-if="isVisible">
  <h1>Title</h1>
  <p>Description</p>
</template>
 
ในตัวอย่างนี้, อิลิเมนต์ <h1> และ <p> จะถูกเรนเดอร์เฉพาะเมื่อ isVisible เป็น true
 
2.การแสดงผลตามเงื่อนไข:
เพื่อแสดงผลบล็อกของหลายอิลิเมนต์ตามเงื่อนไข
 
<template v-if="user.isLoggedIn">
  <p>Welcome, {{ user.name }}!</p>
  <button @click="logout">Logout</button>
</template>
<template v-else>
  <p>Please log in to continue.</p>
  <button @click="login">Login</button>
</template>
 
ในกรณีนี้, ขึ้นอยู่กับค่า user.isLoggedIn จะมีการแสดงอินเตอร์เฟซการล็อกอิน
หรือการล็อกเอาท์
 
3.การวนลูปอิลิเมนต์:
เมื่อใช้ v-for ในการวนลูปหลายอิลิเมนต์โดยไม่ต้องเพิ่มอิลิเมนต์ wrapper เพิ่มเติมใน DOM
 
<template v-for="item in items" :key="item.id">
  <li>{{ item.name }}</li>
  <li>{{ item.description }}</li>
</template>
 
ในกรณีนี้, แต่ละรายการใน array items จะถูกเรนเดอร์เป็นอิลิเมนต์ <li> สองอันโดย
ไม่ต้องเพิ่มอิลิเมนต์ wrapper เพิ่มเติม
 

ตัวอย่างการใช้ <template> ในคอมโพเนนต์ของ Vue

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

const showDetails = ref(false)
const title = ref('My Title')
const description = ref('This is a detailed description.')

function toggleDetails() {
  showDetails.value = !showDetails.value;
}
</script>

<template>
  <div>
    <button @click="toggleDetails">Toggle Details</button>    
    <template v-if="showDetails">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
    </template>
  </div>
</template>
 
ในคอมโพเนนต์นี้, แท็ก <template> ถูกใช้เพื่อแสดงผล title และ description 
ตามเงื่อนไขของค่า showDetails ปุ่ม toggle ช่วยให้ผู้ใช้สามารถแสดงหรือซ่อน
รายละเอียดเหล่านี้ได้ 
 
เราสามารถใช้งาน v-else และ v-else-if บน <template> ได้เช่นกัน
แต่เราไม่สามารถใช้งาน v-show กับ <template> ได้ ทั้งนี้ก็เพราะ v-show ใช้ css
กำหนกการซ่อนหรือแสดงกับ DOM ที่แสดงเท่านั้น ในขณะที่ <template> จะไม่มีการ
เรนเดอร์หรือแสดงผลในผลลัพธ์สุดท้าย







กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง



Tags:: template vuejs conditional rendering v if







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )








สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ