ربط السمات والفئات

ربط الأصناف والأنماط

صياغة الكائن مع :class

<div :class="{ active: isActive, disabled: isDisabled }">
  Status box
</div>

<!-- if isActive is true, the "active"
     class is applied -->

دمج الأصناف الثابتة والديناميكية

<div class="card" :class="{ highlighted: isSelected }">
  Always has "card";
  adds "highlighted" when selected.
</div>

صياغة المصفوفة مع :class

<div :class="[baseClass, themeClass]">Box</div>

<!-- data:
     baseClass = "panel"
     themeClass = "dark" -->

الشروط داخل المصفوفة

<div :class="[isActive ? 'active' : '', errorClass]">
  ...
</div>

<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
  ...
</div>

ربط الأنماط المضمّنة

<p :style="{ color: textColor, fontSize: size + 'px' }">
  Styled text
</p>

<!-- data: textColor = "red", size = 18 -->

:style مع مصفوفة

<div :style="[baseStyles, overrideStyles]">
  Merged styles
</div>

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

ربط السمات ديناميكيًا

<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>

السمات المنطقية

<button :disabled="isSubmitting">Submit</button>

<!-- if isSubmitting is false,
     the disabled attribute is removed -->

ربط عدة أصناف بشكل شرطي

<li
  class="todo"
  :class="{
    done: task.completed,
    overdue: task.isLate,
    priority: task.urgent
  }"
>
  {{ task.title }}
</li>

اختبار سريع

مراجعة: ربط السمات والأصناف