Frontend Academy · บทเรียน

คำสั่ง: v-if, v-for, v-bind และ v-on

เรนเดอร์ตามเงื่อนไขด้วย v-if และ v-show วนซ้ำด้วย v-for ผูกแอตทริบิวต์แบบไดนามิกด้วย v-bind และรับฟังเหตุการณ์ของ DOM ด้วย v-on

บทเรียน 3 จาก 413 ขั้นตอน

คำสั่ง: v-if, v-for, v-bind และ v-on เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คำสั่งของ Vue คืออะไร

คำสั่งคือแอตทริบิวต์พิเศษที่ขึ้นต้นด้วย v- ซึ่งบอกให้ Vue ดำเนินการบางอย่างกับองค์ประกอบ DOM คำสั่งเหล่านี้จะถูกประเมินเป็นนิพจน์ JavaScript และตอบสนองต่อการเปลี่ยนแปลงของข้อมูลรีแอกทีฟ

v-if, v-else-if, v-else

v-if จะแสดงองค์ประกอบตามเงื่อนไข โดยพิจารณาจากนิพจน์ที่เป็นจริง องค์ประกอบจะถูกลบออกจาก DOM โดยสมบูรณ์เมื่อเงื่อนไขเป็นเท็จ ส่วน v-else ใช้ระบุทางเลือกสำรอง

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — การสลับการมองเห็น

v-show จะสลับ CSS display: none แทนการเพิ่มหรือลบองค์ประกอบออกจาก DOM ใช้ v-show เมื่อองค์ประกอบมีการสลับบ่อยครั้ง และใช้ v-if เมื่อเงื่อนไขเปลี่ยนแปลงไม่บ่อย

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — การเรนเดอร์รายการ

v-for="item in items" จะแสดงองค์ประกอบหนึ่งครั้งสำหรับแต่ละรายการ ควรใส่ :key เสมอเพื่อให้การอัปเดตมีความเสถียร

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

v-for กับอ็อบเจ็กต์

วนซ้ำค่าของอ็อบเจ็กต์ หรือวนซ้ำคู่คีย์กับค่า

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — การผูกแอตทริบิวต์

v-bind:attr หรือรูปแบบย่อ :attr ใช้ผูกแอตทริบิวต์ HTML เข้ากับค่ารีแอกทีฟแบบไดนามิก

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

ไวยากรณ์อ็อบเจ็กต์ของ v-bind

ผูกแอตทริบิวต์หลายรายการพร้อมกันโดยใช้อ็อบเจ็กต์

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

การผูกคลาส: :class

ผูกคลาส CSS ตามเงื่อนไขด้วยอ็อบเจ็กต์ (คีย์ = ชื่อคลาส, ค่า = เงื่อนไข) หรือใช้อาร์เรย์

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

การผูกสไตล์: :style

ผูกสไตล์แบบอินไลน์ด้วยอ็อบเจ็กต์แบบ camelCase

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — การรับฟังเหตุการณ์

v-on:event หรือรูปแบบย่อ @event ใช้ติดตั้งตัวรับฟังเหตุการณ์

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

ตัวปรับแต่งเหตุการณ์

Vue มีตัวปรับแต่งเหตุการณ์ในตัว ได้แก่ .prevent (preventDefault), .stop (stopPropagation), .once (ทำงานครั้งเดียว), .self (ทำงานเฉพาะเมื่อเป้าหมายเป็นองค์ประกอบนั้นเอง) และ .passive (ช่วยปรับปรุงประสิทธิภาพการเลื่อน)

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

ตรวจสอบความเข้าใจ

ควรใช้ v-show แทน v-if เมื่อใด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: คำสั่งของ Vue

v-if ลบหรือเพิ่มองค์ประกอบใน DOM ส่วน v-show สลับการแสดงผล v-for ใช้เรนเดอร์รายการ (ต้องมี :key เสมอ) v-bind (:) ใช้ผูกแอตทริบิวต์ รวมถึง :class และ :style ส่วน v-on (@) ใช้ติดตั้งตัวรับฟังเหตุการณ์ ตัวปรับแต่งเหตุการณ์ ได้แก่ .prevent, .stop และ .once ส่วน v-model ใช้สำหรับการผูกข้อมูลแบบสองทาง (ทำงานร่วมกันระหว่าง v-bind:value และ v-on:input)

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “คำสั่ง: v-if, v-for, v-bind และ v-on” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คำสั่ง: v-if, v-for, v-bind และ v-on” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คำสั่ง: v-if, v-for, v-bind และ v-on”

เรนเดอร์ตามเงื่อนไขด้วย v-if และ v-show วนซ้ำด้วย v-for ผูกแอตทริบิวต์แบบไดนามิกด้วย v-bind และรับฟังเหตุการณ์ของ DOM ด้วย v-on คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “คำสั่ง: v-if, v-for, v-bind และ v-on” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy