CSS คลาสผ่าน data ใน Vue

สามารถเพิ่ม CSS คลาสให้กับองค์ประกอบได้ ขึ้นอยู่กับค่าของคุณสมบัติ ของอ็อบเจ็กต์ data มาดูที่ ตัวอย่าง สมมติว่าเรามีคุณสมบัติ ต่อไปนี้:

javascriptdata() {
  return {
    isActive: true,
    hasError: true,
  }
}

มาเพิ่ม CSS คลาสให้กับองค์ประกอบขึ้นอยู่ กับค่าของคุณสมบัติของเรา:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    ข้อความ
  </p>
</template>

Задание 1

กำหนดคุณสมบัติต่อไปนี้:

javascriptdata() {
  return {
    isValid: true,
    isDisabled: true,
  }
}

ทำให้ขึ้นอยู่ กับค่าของคุณสมบัติเหล่านี้ในแท็ก เพิ่ม CSS คลาสที่เกี่ยวข้อง