Jassif Team Institution

Syntax

আপনার নিজস্ব Vue সার্ভার পান

<div v-bind:[attribute]="[Vue data]"></div>

Bind style

Vue-এর সাথে লাইন স্টাইলিং V-bind-এর সাথে Vue-তে স্টাইল অ্যাট্রিবিউট বাঁধাই করে করা হয়।

v-bind নির্দেশের মান হিসাবে, আমরা একটি CSS বৈশিষ্ট্য এবং মান সহ একটি JavaScript অবজেক্ট লিখতে পারি:

<div v-bind:style="{ fontSize: size }">
  Text example
</div>

যদি ইচ্ছা হয়, অক্ষর আকারের সাংখ্যিক মানটি অক্ষর আকারের ইউনিট থেকে আলাদা করা যেতে পারে, যেমন:

<div v-bind:style="{ fontSize: size + 'px' }">
  Text example
</div>

একটি CSS সম্পত্তির নাম CSS সিনট্যাক্সের লাইনে লেখা যেতে পারে (কাবাব-কেস), কিন্তু এটি সুপারিশ করা হয় না:

<div v-bind:style="{ 'font-size': size + 'px' }">
  Text example
</div>

পটভূমির রঙ Vue ইনস্ট্যান্সের ভিতরে 'bgVal' ডেটা অ্যাট্রিবিউটের মানের উপর নির্ভর করে:

<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
  Notice the background color on this div tag.
</div>

'isimportant' ডেটা অ্যাট্রিবিউটের মান 'সত্য' বা 'মিথ্যা' কিনা তার উপর নির্ভর করে পটভূমির রঙ একটি জাভাস্ক্রিপ্ট শর্তসাপেক্ষ (ত্রিনারি) অভিব্যক্তির সাথে সেট করা হয়েছে:

<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
  Conditional background color
</div>

Bind class

v-bind ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহার করা যেতে পারে।

v-bind:class এর মান একটি পরিবর্তনশীল হতে পারে:

<div v-bind:class="className">
  The class is set with Vue
</div>

v-bind:class-এর মানও একটি অবজেক্ট হতে পারে, যেখানে ক্লাসের নাম শুধুমাত্র কাজ করবে যদি এটি 'true' সেট করা থাকে:

<div v-bind:class="{ myClass: true }">
  The class is set conditionally to change the background color
</div>

যখন v-bind:class-এর মান একটি অবজেক্ট হয়, তখন Vue অ্যাট্রিবিউটের উপর নির্ভর করে ক্লাস বরাদ্দ করা যেতে পারে:

<div v-bind:class="{ myClass: isImportant }">
  The class is set conditionally to change the background color
</div>

Example

এখানে আমরা 'v-bind:'-এর পরিবর্তে ':' লিখি:

<div :class="{ impClass: isImportant }">
  The class is set conditionally to change the background color
</div>

বিভ্রান্তি এড়াতে আমরা এই টিউটোরিয়ালে v-bind: সিনট্যাক্স ব্যবহার করব।