เงื่อนไขและลูป
เรนเดอร์ตามเงื่อนไขด้วย v-if และเรนเดอร์รายการด้วย v-for
เงื่อนไขและลูป เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
การแสดงผลแบบมีเงื่อนไข
Vue ให้คุณแสดงหรือซ่อนส่วนต่าง ๆ ของส่วนติดต่อผู้ใช้ตามข้อมูลได้
- v-if แสดงผลองค์ประกอบตามเงื่อนไข
- v-else-if และ v-else ใช้เชื่อมเงื่อนไข
- v-show สลับการมองเห็น
v-if
คำสั่ง v-if จะแสดงผลองค์ประกอบก็ต่อเมื่อนิพจน์ขององค์ประกอบมีค่าเป็นจริง
<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>v-else-if และ v-else
เชื่อมเงื่อนไขด้วย v-else-if และ v-else โดยคำสั่งเหล่านี้ต้องตามหลัง v-if โดยตรง
<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>v-show
v-show จะแสดงผลองค์ประกอบเสมอ แต่จะสลับคุณสมบัติการแสดงผลของ CSS
<div v-show="isVisible">
This div stays in the DOM,
only display:none toggles.
</div>v-if กับ v-show
ความแตกต่างสำคัญ:
- v-if เพิ่มหรือนำองค์ประกอบออกจาก DOM ทั้งหมด
- v-show เก็บองค์ประกอบไว้ใน DOM และเพียงสลับการแสดงผล
ใช้ v-show กับสิ่งที่สลับบ่อย ๆ ใช้ v-if เมื่อเงื่อนไขเปลี่ยนไม่บ่อยหรือองค์ประกอบมีต้นทุนสูง
v-for กับอาร์เรย์
คำสั่ง v-for แสดงผลรายการโดยวนซ้ำผ่านอาร์เรย์
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->v-for พร้อมดัชนี
v-for ยังสามารถให้ค่า ดัชนี ของแต่ละรายการแก่คุณได้
<ul>
<li v-for="(item, index) in items">
{{ index }}: {{ item }}
</li>
</ul>ความสำคัญของ :key
กำหนด :key ที่ไม่ซ้ำกันเสมอเมื่อใช้ v-for
- ช่วยให้ Vue ติดตามเอกลักษณ์ของแต่ละโหนด
- ทำให้การอัปเดต DOM มีประสิทธิภาพและถูกต้อง
- ใช้รหัสที่ไม่ซ้ำกันและคงที่ แทนดัชนีของอาร์เรย์เมื่อมีการจัดลำดับรายการใหม่
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>เหตุใด :key จึงสำคัญ
หากไม่มีคีย์ที่เหมาะสม Vue อาจนำองค์ประกอบที่ไม่ถูกต้องกลับมาใช้เมื่อรายการเปลี่ยนแปลง
- ช่องป้อนข้อมูลในฟอร์มอาจเก็บค่าที่ไม่ถูกต้อง
- ภาพเคลื่อนไหวอาจแสดงผลผิดพลาด
- สถานะอาจไปผูกกับแถวที่ไม่ถูกต้อง
คีย์ที่ไม่ซ้ำกันและคงที่จะช่วยป้องกันข้อผิดพลาดเหล่านี้
v-for กับออบเจ็กต์
v-for สามารถวนซ้ำค่าคุณสมบัติของออบเจ็กต์ โดยอาจรับคีย์และดัชนีเพิ่มเติมได้
<li v-for="(value, key) in userProfile" :key="key">
{{ key }}: {{ value }}
</li>
<!-- userProfile = { name: "Ada", age: 36 } -->การใช้ v-for ร่วมกับเงื่อนไข
หากต้องการกรองรายการ ควรใช้ คุณสมบัติที่คำนวณแล้ว แทนการใส่ v-if ในองค์ประกอบเดียวกับ v-for
<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
{{ task.title }}
</li>
<!-- activeTasks is a computed that
returns only unfinished tasks -->ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับเงื่อนไขและลูป
สรุป: เงื่อนไขและลูป
คุณได้เรียนรู้การแสดงผลรายการและการแสดงผลแบบมีเงื่อนไข:
- v-if / v-else-if / v-else ใช้แสดงผลตามเงื่อนไข
- v-show สลับเฉพาะการแสดงผล
- v-for วนซ้ำผ่านอาร์เรย์และออบเจ็กต์
- เพิ่ม :key ที่ไม่ซ้ำกันเสมอ
- กรองรายการด้วยคุณสมบัติที่คำนวณแล้ว
ถัดไป: การผูกแอตทริบิวต์และคลาส
คำถามที่พบบ่อย
บทเรียน “เงื่อนไขและลูป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เงื่อนไขและลูป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เงื่อนไขและลูป”
เรนเดอร์ตามเงื่อนไขด้วย v-if และเรนเดอร์รายการด้วย v-for คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “เงื่อนไขและลูป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแทรกค่าและคำสั่ง
- เงื่อนไขและลูป
- การผูกแอตทริบิวต์และคลาส