การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind
ชื่อแอตทริบิวต์แบบไดนามิก :[dynamicAttr] ไวยากรณ์ออบเจ็กต์ของ v-bind และการผูกแอตทริบิวต์หลายรายการพร้อมกัน
การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การผูกแอตทริบิวต์แบบไดนามิก
คำสั่ง v-bind (รูปแบบย่อคือ :) เชื่อมแอตทริบิวต์ HTML เข้ากับค่าแบบตอบสนอง คำสั่งนี้ใช้กับคลาส สไตล์ และแม้แต่แอตทริบิวต์ที่ตั้งชื่อแบบไดนามิกได้
v-bind พื้นฐาน
ผูกแอตทริบิวต์ใดก็ได้เข้ากับนิพจน์ เมื่อค่ามีการเปลี่ยนแปลง Vue จะอัปเดตแอตทริบิวต์นั้น
<img :src="imageUrl" :alt="description" />การผูกคลาส: รูปแบบออบเจ็กต์
สำหรับคลาส รูปแบบออบเจ็กต์จะเปิดหรือปิดคลาสตามค่าที่เป็นจริง คีย์คือชื่อคลาส ส่วนค่าจะกำหนดว่าจะนำคลาสนั้นมาใช้หรือไม่
<div :class="{ active: isActive, disabled: isDisabled }"></div>การผูกคลาส: รูปแบบอาร์เรย์
รูปแบบอาร์เรย์ใช้กำหนดรายการคลาส คุณสามารถผสมสตริงคงที่กับตัวแปรแบบตอบสนอง หรือซ้อนออบเจ็กต์สำหรับรายการที่มีเงื่อนไขได้
<div :class="[baseClass, isActive ? activeClass : '']"></div>การรวมรูปแบบอาร์เรย์กับออบเจ็กต์
คุณสามารถซ้อนรูปแบบออบเจ็กต์ไว้ภายในอาร์เรย์ เพื่อใช้ข้อดีของทั้งสองรูปแบบ ได้แก่ คลาสที่เปิดใช้เสมอร่วมกับคลาสที่มีเงื่อนไข
<div :class="[baseClass, { active: isActive }]"></div>การผูกสไตล์: รูปแบบออบเจ็กต์
ผูกสไตล์แบบอินไลน์ด้วยออบเจ็กต์ ใช้ชื่อพร็อพเพอร์ตีแบบ camelCase (หรือแบบ kebab-case ภายในเครื่องหมายคำพูด) ค่าเหล่านี้สามารถเป็นค่าที่ตอบสนองได้
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>การผูกสไตล์: อาร์เรย์ของออบเจ็กต์
ส่งอาร์เรย์ของออบเจ็กต์สไตล์เพื่อรวมแหล่งที่มาของสไตล์หลายรายการ เช่น สไตล์พื้นฐานและการแทนที่ตามธีม
<div :style="[baseStyles, overrideStyles]"></div>การผูกแอตทริบิวต์หลายรายการพร้อมกัน
v-bind ที่ไม่มีอาร์กิวเมนต์จะกระจายออบเจ็กต์แอตทริบิวต์ทั้งชุดลงบนองค์ประกอบ แต่ละคีย์จะกลายเป็นแอตทริบิวต์หนึ่งรายการ
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>ชื่อแอตทริบิวต์แบบไดนามิก
ใช้วงเล็บเหลี่ยมเพื่อคำนวณชื่อแอตทริบิวต์ในขณะทำงาน นิพจน์ภายในวงเล็บจะถูกประเมินและนำไปใช้เป็นคีย์ของแอตทริบิวต์
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>ควรใช้แต่ละรูปแบบเมื่อใด
- รูปแบบออบเจ็กต์สำหรับคลาส — เปิดหรือปิดคลาสหลายรายการตามเงื่อนไข
- รูปแบบอาร์เรย์สำหรับคลาส — รวมคลาสพื้นฐานกับคลาสที่มีเงื่อนไข
v-bind="obj"— ส่งต่อแอตทริบิวต์ทั้งชุด- ชื่อแบบไดนามิก
:[name]— เมื่อคีย์ของแอตทริบิวต์ถูกกำหนดในขณะทำงาน
ตัวอย่างที่รวมหลายรูปแบบ
องค์ประกอบนี้ใช้คลาสแบบไดนามิก สไตล์แบบไดนามิก และแอตทริบิวต์แบบกระจายร่วมกัน ทั้งหมดเป็นแบบตอบสนอง
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับ v-bind
สรุป
คุณได้เรียนรู้ความสามารถที่หลากหลายของ v-bind:
- รูปแบบออบเจ็กต์สำหรับคลาสจะเปิดหรือปิดคลาสตามเงื่อนไข ส่วนรูปแบบอาร์เรย์ใช้รวมคลาสเหล่านั้น
- การผูกสไตล์ใช้ออบเจ็กต์ (camelCase) หรืออาร์เรย์ของออบเจ็กต์
v-bind="obj"จะกระจายแอตทริบิวต์ทั้งหมดจากออบเจ็กต์:[name]="val"จะผูกแอตทริบิวต์ที่มีชื่อแบบไดนามิก
คำถามที่พบบ่อย
บทเรียน “การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind”
ชื่อแอตทริบิวต์แบบไดนามิก :[dynamicAttr] ไวยากรณ์ออบเจ็กต์ของ v-bind และการผูกแอตทริบิวต์หลายรายการพร้อมกัน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model: กลไกภายในของการผูกข้อมูลสองทาง
- ตัวปรับแต่งเหตุการณ์ v-on
- การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind
- การเขียนคำสั่งแบบกำหนดเอง