อ็อบเจ็กต์ที่มีคลาส CSS ใน Vue

คลาส CSS สามารถจัดเก็บอยู่ในอ็อบเจ็กต์ได้เช่นกัน ในกรณีนี้ชื่อคลาสจะเป็นคีย์ของอ็อบเจ็กต์ และสมาชิกของอ็อบเจ็กต์จะเป็นค่าบูลีน ถ้าค่าเป็น true คลาสนั้นจะถูกเพิ่มเข้าไปในองค์ประกอบ และถ้าเป็น false ก็จะไม่ถูกเพิ่ม

ลองมาทดลองปฏิบัติกัน สมมติว่าเรามีอ็อบเจ็กต์ที่มีคลาสดังต่อไปนี้:

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

ผูกอ็อบเจ็กต์นี้กับแท็ก:

App.vue<template>
  <p :class="obj">text</p>
</template>

Задание 1

ได้รับอ็อบเจ็กต์ที่มีคลาส CSS ดังต่อไปนี้:

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}

นำคลาสเหล่านี้ไปใช้กับแท็กใดแท็กหนึ่ง ตรวจสอบว่าคลาสใดถูกนำไปใช้ และคลาสใดไม่ได้ถูกนำไปใช้