Vue.js: ربط Class و Style

آخر تحديث: 2026-10-20

:classe و:style هما أكثر أشكال الربط استخدامًا في Vue — فهما يتيحان لك التبديل ديناميكيًا بين أسماء فئات CSS والأنماط المضمنة بناءً على البيانات. وفي الأساس، هما شكلان خاصان من أشكال v-bind؛ ونظرًا لاستخدامهما المتكرر، فقد تم تطبيقهما باعتبارهما «تسهيلات لغوية».

يكفي إتقان أنماط الكتابة الخمسة هذه لتغطية 95% من الحالات: بناء جملة «object»، وبناء جملة «array»، والمشغلات الثلاثية، والخصائص المحسوبة، وتسلسل «سلسلة».

1. ما ستتعلمه

• :classe بناء جملة الكائنات: التبديل بين الفئة الواحدة والفئات المتعددة بناءً على الشروط
• :classe صيغة المصفوفات: تطبيق فئات متعددة في آن واحد
• المزج بين المصفوفات والكائنات: تركيبات معقدة لأسماء الفئات
• :style بناء الجملة للكائنات: الأنماط المضمنة الديناميكية
• :style صيغة المصفوفات: دمج عدة كائنات أنماط
• ربط متغيرات CSS (موصى به لـ Vue 3)

2. تحدي في التصميم يتعلق بملصق status الطلب

(1) المشكلة: 5 حالات، 5 عبارات "if"

كانت أليس بحاجة إلى عرض 5 حالات للطلبات في لوحة الإدارة بألوان مختلفة:

<!-- ❌ The "Broken" Version: 5 v-if with class -->
<span v-if="status === 'pending'" class="badge yellow">Pending</span>
<span v-else-if="status === 'paid'" class="badge green">Paid</span>
<span v-else-if="status === 'shipped'" class="badge blue">Shipped</span>
<span v-else-if="status === 'delivered'" class="badge gray">Delivered</span>
<span v-else class="badge red">Cancelled</span>

مدير المنتج تشارلي:

«أليس، هذا مظهره سيئ. ماذا لو أضفنا 3 حالات أخرى الشهر المقبل؟ لا يمكنك الاكتفاء بالنسخ واللصق. نحن بحاجة إلى نهج ديناميكي منظم.»

(2) Vue :class الحل: التعامل مع 5 حالات في سطر واحد فقط

(3) الإيرادات

• تقليص كود HTML: 5 أسطر من if-else → سطر واحد من :class
• قابلية الصيانة: لإضافة status جديدة، ما عليك سوى تعديل الخاصية computed؛ بينما يظل القالب دون تغيير.
• سهولة القراءة: يتم تجميع تعيينات فئات الstatus في مكان واحد، مع اتباع منطق واضح

3. 5 طرق لكتابة :class

(1) قواعد بناء الجمل النصية

(2) بناء الجملة باستخدام الكائنات (الأكثر شيوعًا)

(3) صيغة المصفوفات

(4) التعايش مع الفئات الثابتة

(5) دروس حول المكونات

▶ مثال: 5 طرق لكتابة :class

الإخراج:

String → class=badge
Object → class=active
Array → class=active error
Computed → class=active بعد دمج الشروط

4. 5 طرق لكتابة :style

(1) قواعد بناء الجملة الخاصة بالكائنات

(2) تحويل أسماء خصائص CSS

يقوم Vue تلقائيًا بتحويل قواعد تسمية JavaScript إلى قواعد تسمية CSS:

(3) صيغة المصفوفات (دمج كائنات متعددة)

(4) إضافة البادئة تلقائيًا

يضيف Vue 3 تلقائيًا بادئات المتصفح إلى خصائص CSS (بناءً على محرك المتصفح):

// Write:
{ transform: 'rotate(45deg)' }

// Vue Auto-add:
{
  -webkit-transform: 'rotate(45deg)',
  transform: 'rotate(45deg)'
}

(5) متغيرات CSS (موصى بها لـ Vue 3)

▶ مثال: 5 طرق لكتابة :style

الإخراج:

Object → color: red; font-size: 16px
Multi → background: #42b883; padding: 20px
Array → دمج baseStyles مع themeStyles
CSS Var → --theme-color: #35495e

5. تمرين شامل: شارة حالة الطلب الديناميكية

▶ مثال: شارة status الطلب

الإخراج:

status = pending → شارة صفراء Pending
status = paid → شارة خضراء Paid
status = cancelled → شارة حمراء Cancelled

(1) 📊 4. 5 أخطاء شائعة

(2) 📊 5. 5 مقارنات الأداء

(3) 📊 6. الاختلافات الخمسة الرئيسية بين «الفئة» و«الأسلوب»

❓ أسئلة شائعة

📖 ملخص

• :class و:style هما صيغتان مبسطتان لـ v-bind؛ وهما الأكثر استخدامًا، ولذلك تم تبسيطهما.
• :class — 5 طرق لتعريفه: سلسلة، كائن، array، array + كائن، خاصية محسوبة
• :style — 5 طرق لكتابته: كائن، array، array + كائن، متغيرات CSS، الخصائص المحسوبة
• الدمج التلقائي للفئات الثابتة و:class الديناميكية
• يضيف Vue 3 بادئات CSS الخاصة بالمتصفحات تلقائيًا
• تُعد متغيرات CSS الحل الموصى به لتبديل السمات في Vue 3 (وهي أكثر كفاءة من تبديل الأنماط)
• الأداء: الخصائص الكائنية/المحسوبة > المصفوفات > السلاسل

📝 تمارين

1. أسئلة أساسية (مستوى الصعوبة: ⭐)

   استخدم محدد :class لتنفيذ ثلاث حالات للأزرار:

   • الأساسي: نص أبيض على خلفية زرقاء
   • النجاح: نص أبيض على خلفية خضراء
   • خطر: نص أبيض على خلفية حمراء

   البيانات: const variant = ref('primary')

2. مسائل متقدمة (مستوى الصعوبة: ⭐⭐)

   قم بتنفيذ قائمة الطلبات بحيث يعرض كل صف شارة بلون مختلف بناءً على status الطلب:

   • 5 حالات (قيد الانتظار/مدفوعة/مشحونة/مسلّمة/ملغاة)
   • إرجاع كائن class باستخدام خاصية محسوبة
   • :style إضافة لون الرمز المطابق للstatus

3. مسألة التحدي (مستوى الصعوبة: ⭐⭐⭐)

   تنفيذ نظام كامل لتبديل السمات:

   1. 3 أنماط (فاتح/داكن/عالي التباين)
   2. استخدم متغيرات CSS لربط ألوان السمة (الأساسية/الثانوية/الخلفية/النص)
   3. :class — تغيير اسم فئة السمة
   4. استخدم localStorage لتخزين اختيار المستخدم
   5. لا يؤدي تغيير السمات إلى تحديث الصفحة (يتم تحديث التصميم المتجاوب تلقائيًا)

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن