نتابع الحديث عن الـ v-bind وفي هذا الدرس سوف نخصص الحديث للتحكم بالسمة class المتعلقة بإضافة كلاسات css.
ليكن لدي كلاسين في الـ style :
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
في الحالة الطبيعية إذا أردنا أن نضيف الكلاسين لأي تاغ في الـ html نقوم بالتالي بهذه الطريقة:
<h1 class="red blue">hello world</h1>
وستكون النتيجة هي تطبيق الكلاسين على العنصر وفي هذه الحالة كون الكلاسين يتحكمان بلون الخط فسوف سيتم تنفيذ الكلاس الثاني ذو اللون الأزرق لأنه يتم تنفيذ التعليمات بالترتيب.
لكن ماذا لو أردت ان ابدل بين هذين الكلاسين بشكل ديناميكي 
؟
هنا يأتي دور الـ v-bind لتنفيذ الكلاسات والتبديل بينها بسهولة يتم ذلك بهذا الشكل:
<h1 :class="{'red': false , 'blue': true}">hello world</h1>
وهنا سوف يتم تنفيذ الكلاس blue فقط فإذا كانت قيمة الكلاس true يتم تنفيذه اما إذا كانت قيمته false فلا يتم تنفيذه.
يمكن ان نستخدم متغيرات للتحكم بهذه القيم في الدروس القادمة سيكون لدينا مثال عملي حول هذا الموضوع.
تجدوا التفاصيل في هذا المقطع:
وتجدوا الكود هنا في الفرع الخاص بهذا الدرس على مستودع السلسلة على الرابط التالي:
