الربط الديناميكي والمتعدد باستخدام v-bind
أسماء السمات الديناميكية :[dynamicAttr]، وصياغة كائن v-bind، وربط سمات متعددة دفعة واحدة
الربط الديناميكي والمتعدد باستخدام v-bind درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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"سمةً ذات اسم ديناميكي.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «الربط الديناميكي والمتعدد باستخدام v-bind» مجاني؟
نعم — نص درس «الربط الديناميكي والمتعدد باستخدام v-bind» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «الربط الديناميكي والمتعدد باستخدام v-bind»؟
أسماء السمات الديناميكية :[dynamicAttr]، وصياغة كائن v-bind، وربط سمات متعددة دفعة واحدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الربط الديناميكي والمتعدد باستخدام v-bind»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-model: آليات الربط ثنائي الاتجاه الداخلية
- معدّلات أحداث v-on
- الربط الديناميكي والمتعدد باستخدام v-bind
- كتابة التوجيهات المخصصة