การผูกแอตทริบิวต์และคลาส

การผูกคลาสและสไตล์

ไวยากรณ์ออบเจ็กต์ของ :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>

ตรวจสอบความเข้าใจ

ทบทวน: การผูกแอตทริบิวต์และคลาส