Vue ، كيفية استخدام الخاصية كاسم للفئة

أحيانًا تقوم بتمرير خاصية إلى مكون ، وتريد استخدام قيمة الخاصية هذه كاسم للفئة. كيف يتم فعل ذلك؟

لنفترض أن لديك مكونًا للسيارة.

تريد إضافة فئة إلى مخرجاتها بناءً على خاصية.

لذلك ربما تم استدعاء الدعامةcolor، ويمكنك استخدامه بهذه الطريقة في أجزاء أخرى من التطبيق:

<Car color="red">
<Car color="blue">

في مكون سيارتك ، تحتاج أولاً إلى إعلان عنصر اللون:

<script>
export default {
  name: 'Car',
  props: {
    color: String
  }
}
</script>

ثم يمكنك استخدامه في جزء القالب:

<template>
  <div :class="color"></div>
</template>

إذا كنت تريد إضافة ملفcarclass ، بالإضافة إلى الفئة المحددة بواسطة color prop ، يمكنك استخدام بناء الجملة التالي:

<template>
  <div :class="['car', color]"></div>
</template>

ترميز سعيد!

تحميل مجانيكتيب Vue