Vue :class এবং :style-কে object এবং array syntax এর বিশেষ সুবিধা দেয় যাতে আপনি reactive state-এর উপর ভিত্তি করে শর্তসাপেক্ষে ক্লাস এবং inline styles প্রয়োগ করতে পারেন — ম্যানুয়ালি ক্লাস স্ট্রিং তৈরি করার চেয়ে পরিষ্কার।
:class-এর জন্য Object syntax — শর্তের উপর ভিত্তি করে ক্লাস টগল করুন
<script setup>
import { ref } from "vue";
const isActive = ref(true);
const hasError = ref(false);
</script>
<template>
<!-- a class is applied when its value is truthy -->
<div :class="{ active: isActive, 'text-red': hasError }">...</div>
<!-- renders class="active" (active=true, text-red=false) -->
</template>
প্রতিটি key একটি ক্লাস নাম এবং প্রতিটি value একটি boolean condition — ক্লাসটি শুধুমাত্র তখনই প্রদর্শিত হয় যখন এর value সত্য হয়। এটি state-driven styling-এর জন্য সবচেয়ে সাধারণ প্যাটার্ন (active tabs, error states, ইত্যাদি)।
:class-এর জন্য Array syntax — একাধিক একত্রিত করুন
<template>
<div :class="[baseClass, isActive ? 'active' : '', { disabled: isDisabled }]">...</div>
<!-- mix static classes, ternaries, and objects -->
</template>
:class static class attribute-এর সাথে একীভূত হয়
<div class="card" :class="{ featured: isFeatured }">...</div>
<!-- result: class="card featured" — static and dynamic combine automatically -->
আপনি class এবং :class উভয়ই একসাথে ব্যবহার করতে পারেন; Vue সেগুলো একত্রিত করে।
:style-এর জন্য Object/array syntax
<script setup>
const color = ref("blue");
const size = ref(16);
</script>
<template>
<!-- camelCase or 'kebab-case' property names -->
<div :style="{ color: color, fontSize: size + 'px' }">...</div>
<div :style="[baseStyles, overrideStyles]">...</div> <!-- merge style objects -->
</template>
Components-এ ক্লাস বাঁধা
<MyComponent :class="{ active: isActive }" />
<!-- the class falls through to the component's root element -->
এটি কেন গুরুত্বপূর্ণ
গতিশীল class/style binding হল প্রতিদিনের Vue কাজ — active nav item হাইলাইট করা, validation errors দেখানো, theming।
Object syntax ({ className: condition }) শর্তসাপেক্ষ styling-কে declarative এবং পঠনযোগ্য করে তোলে, ত্রুটিপূর্ণ ম্যানুয়াল string concatenation এড়ায়।
jানা যে :class static class-এর সাথে একত্রিত হয় এবং sources একত্রিত করার জন্য array form, ব্যবহারিকভাবে সমস্ত শর্তসাপেক্ষ-styling চাহিদা পরিষ্কারভাবে কভার করে।