Vue-এ style অ্যাট্রিবিউটের মাধ্যমে স্টাইলিং

CSS স্টাইল সরাসরি style অ্যাট্রিবিউটের মাধ্যমে যোগ করা যেতে পারে। এজন্য অ্যাট্রিবিউটে একটি অবজেক্ট পাস করা হয়, যেখানে কাঙ্ক্ষিত CSS প্রোপার্টিগুলি অবজেক্টের কী হতে হবে, এবং সংশ্লিষ্ট CSS প্রোপার্টির মানগুলি - অবজেক্টের মান হতে হবে।

উদাহরণস্বরূপ আসুন একটি অনুচ্ছেদকে লাল রং করি এবং সবুজ রঙের একটি বর্ডার যোগ করি:

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

এখন এর পরিবর্তে বর্ডারের, এর font-size সেট করি 30px-এ। যেহেতু অবজেক্টে হাইফেন সহ কী থাকতে পারে না, আমাদের এটি কোটেশনের মধ্যে নিতে হবে:

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

font-size-এর পরিবর্তে fontSize লেখাও যেতে পারে - এটি ও কাজ করবে:

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>