Vue-এ style অ্যাট্রিবিউটের মাধ্যমে স্টাইলিং
CSS স্টাইল সরাসরি
style অ্যাট্রিবিউটের মাধ্যমে যোগ করা যেতে পারে।
এজন্য অ্যাট্রিবিউটে একটি অবজেক্ট পাস করা হয়, যেখানে কাঙ্ক্ষিত
CSS প্রোপার্টিগুলি অবজেক্টের কী হতে হবে,
এবং সংশ্লিষ্ট CSS প্রোপার্টির মানগুলি -
অবজেক্টের মান হতে হবে।
উদাহরণস্বরূপ আসুন একটি অনুচ্ছেদকে লাল রং করি এবং সবুজ রঙের একটি বর্ডার যোগ করি:
<template>
<p :style="{color: 'red', border: '1px solid green'}">
text
</p>
</template>
এখন এর পরিবর্তে বর্ডারের, এর
font-size সেট করি 30px-এ। যেহেতু
অবজেক্টে হাইফেন সহ কী থাকতে পারে না, আমাদের
এটি কোটেশনের মধ্যে নিতে হবে:
<template>
<p :style="{color: 'red', 'font-size': '30px'}">
text
</p>
</template>
font-size-এর পরিবর্তে
fontSize লেখাও যেতে পারে
- এটি ও কাজ করবে:
<template>
<p :style="{color: 'red', fontSize: '30px'}">
text
</p>
</template>
একটি অনুচ্ছেদ দেওয়া আছে। এর টেক্সটকে সবুজ রং করুন, এবং এর ব্যাকগ্রাউন্ড - হলুদ রং করুন।
একটি অনুচ্ছেদ দেওয়া আছে। এর টেক্সটকে বোল্ড এবং ইটালিক করুন।
