v-bind (:) الربط الديناميكي للسمات
آخر تحديث: 2026-10-22
v-bind (:) الربط الديناميكي للسمات
يربط v-bind تعبيرًا بسمة HTML، وصيغته المختصرة النقطتان :. وتقبل class وstyle إضافةً صيغة الكائن والمصفوفة.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<a v-bind:href="url">Link</a>
<img :src="imgSrc" :alt="altText">
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>⚙️ الوسائط
| expression | اسم السمة مع تعبير؛ وتقبل class/style كائنات ومصفوفات؛ والأسماء الديناميكية عبر :[key] |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The anchor points to the tutorial site; 'Status text' carries the hot class.💡 نقاط مهمة
💡 نصيحة : اختصار لـ v-bind:. والسمات المنطقية المرتبطة بقيمة false تُزال تلقائيًا.
ℹ️ ملاحظة class/style محسَّنتان: صيغة الكائن تبدِّل وفق قيم منطقية، وصيغة المصفوفة تدمج مصادر متعددة.
💡 نصيحة يفرد v-bind="obj" جميع مفاتيح كائن دفعة واحدة (مفيد مع $attrs).
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أربط سمات كثيرة دفعة واحدة؟
ج يفرد v-bind="obj" جميع المفاتيح؛ وتستخدم المكوّنات عادةً v-bind="$attrs".
س لماذا يقبل ربط class كائنًا؟
ج class/style محسَّنتان: صيغة الكائن تبدِّل وفق قيم منطقية، وصيغة المصفوفة تدمج مصادر متعددة.
س كيف أتحكم في السمات المنطقية؟
ج الربط بـ false/null يزيل السمة، وtrue يضيفها — دون حاجة إلى نص فارغ يدوي.
