أحيانًا تقوم بتمرير خاصية إلى مكون ، وتريد استخدام قيمة الخاصية هذه كاسم للفئة. كيف يتم فعل ذلك؟
لنفترض أن لديك مكونًا للسيارة.
تريد إضافة فئة إلى مخرجاتها بناءً على خاصية.
لذلك ربما تم استدعاء الدعامةcolor
، ويمكنك استخدامه بهذه الطريقة في أجزاء أخرى من التطبيق:
<Car color="red">
<Car color="blue">
في مكون سيارتك ، تحتاج أولاً إلى إعلان عنصر اللون:
<script>
export default {
name: 'Car',
props: {
color: String
}
}
</script>
ثم يمكنك استخدامه في جزء القالب:
<template>
<div :class="color"></div>
</template>
إذا كنت تريد إضافة ملفcar
class ، بالإضافة إلى الفئة المحددة بواسطة color prop ، يمكنك استخدام بناء الجملة التالي:
<template>
<div :class="['car', color]"></div>
</template>
ترميز سعيد!
تحميل مجانيكتيب Vue
المزيد من دروس vue:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020