بایندینگ CSS (CSS Binding)
در Vue با دستور v-bind می توانیم ویژگی های style و class را پویا کنیم. «پویا» یعنی ظاهر با تغییر داده ها عوض می شود؛ مثل تغییر یونیفورم مدرسه هنگام انتخاب رنگ.
استایل خطی با v-bind:style
در «استایل خطی (Inline Style)»، ویژگی های CSS را مستقیم روی تگ تنظیم می کنیم.
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,' + opacityVal + ')' }">
Drag the range input above to change opacity here.
<\/div>
نکته: «بایند (Bind)» یعنی وصل کردن مقدار جاوااسکریپت به ویژگی HTML.
دادن کلاس با v-bind:class
وقتی روی عکس کلیک می کنی، کلاس «انتخاب شده» اضافه می شود. کلاس یعنی اسم یک استایل آماده.
<div v-for="(img, index) in images">
<img v-bind:src="img.url"
v-on:click="select(index)"
v-bind:class="{ selClass: img.sel }">
<\/div>
نکات پیشرفته کلاس و استایل
1) ادغام کلاس ها: class و v-bind:class
اگر هر دو استفاده شوند، Vue کلاس ها را باهم ترکیب می کند. چیزی حذف نمی شود.
<div class="impClass" v-bind:class="{ yelClass: isYellow }">
This div belongs to both 'impClass' and 'yelClass'.
<\/div>
2) چند کلاس در یک آبجکت
می توانی چند کلاس را با یک آبجکت بدهی. هر کلید یک کلاس است.
<div v-bind:class="{ yelClass: isYellow, impClass: isImportant }">
This tag can belong to both classes.
<\/div>
3) camelCase یا kebab-case در style
در v-bind:style بهتر است camelCase بنویسی؛ kebab-case هم داخل کوتیشن ها ممکن است.
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
This div tag has pink background and bold text.
<\/div>
نکته: camelCase یعنی هر کلمه بعدی با حرف بزرگ شروع می شود؛ مثل backgroundColor.
4) آرایه کلاس ها
می توانی از آرایه استفاده کنی. بعضی کلاس ها ثابتند، بعضی وابسته به داده اند.
<div v-bind:class="[{ impClass: isImportant }, 'yelClass']">
This div tag uses array syntax for classes.
<\/div>
گام های عملی
- داده ها را بساز و مقدار پیش فرض بده.
- برای استایل فوری، از
v-bind:styleاستفاده کن. - برای حالت های مختلف، از
v-bind:classاستفاده کن.
جمع بندی سریع
v-bind:styleبرای استایل های پویا است.v-bind:classکلاس ها را شرایطی می کند.- class و
v-bind:classباهم ادغام می شوند. - camelCase در style خواناتر و امن تر است.
ادامه مسیر: v-model و ویژگی های محاسبه ای را هم ببین تا بایندینگ CSS بهتر شود.