v-bind (v-bind)
در Vue، دستور v-bind ویژگی های HTML را به «داده (Data)» وصل می کند. یعنی مقدار ویژگی ها از متغیرها می آید و با تغییر داده، ظاهر هم عوض می شود؛ مثل تغییر نام پروفایل داخل برنامه.
v-bind چه کار می کند؟
دایرکتیو «v-bind» یک ویژگی را به یک مقدار از نمونه Vue متصل می کند. بنابراین مقدار ویژگی پویا می شود و همیشه به روز می ماند. این روش خطای کمتر و کد تمیزتری می دهد.
ساختار کلی
<div v-bind:[attribute]="dataValue"></div>
نمونه: اتصال ویژگی src
منبع تصویر از داده url گرفته می شود. با عوض شدن url، تصویر هم عوض می شود. این رفتار مثل تغییر عکس پروفایل است.
<img v-bind:src="url">
اتصال style به صورت شیء
می توانی ویژگی style را به یک شیء جاوااسکریپتی وصل کنی. خاصیت ها همان نام های CSS به شکل camelCase هستند.
<div v-bind:style="{ fontSize: size }">
متن نمونه
</div>
نکته: اگر مقدار عددی است، واحد را اضافه کن؛ مثلاً px.
<div v-bind:style="{ fontSize: size + 'px' }">
متن نمونه
</div>
رنگ پس زمینه پویا
می توانی مقدار را با عبارت جاوااسکریپت بسازی. پس زمینه بر اساس داده تغییر می کند؛ مثل نوار سلامت بازی.
<div v-bind:style="{ backgroundColor: 'hsl(' + bgVal + ',80%,80%)' }">
رنگ پس زمینه را ببین
</div>
<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
پس زمینه شرطی
</div>
اتصال class به صورت پویا
با v-bind:class کلاس ها را از داده بگیر. می توانی نام کلاس را مستقیم بدهی یا با شیء شرطی کنی.
<div v-bind:class="className">
کلاس با Vue تنظیم شده است
</div>
<div v-bind:class="{ myClass: isImportant }">
کلاس به صورت شرطی اعمال می شود
</div>
میان بُر v-bind
می توانی به جای v-bind: فقط : بنویسی. خواناتر و کوتاه تر می شود.
<div :class="{ impClass: isImportant }">
کلاس به صورت شرطی اعمال می شود
</div>
گام های عملی
- یک عنصر با
id="app"داشته باش. - مقدار داده را در نمونه Vue تعریف کن.
- با
v-bindویژگی یا کلاس را وصل کن. - مقدار داده را تغییر بده و نتیجه را ببین.
جمع بندی سریع
v-bindویژگی ها را پویا می کند.- برای
styleاز شیء استفاده کن. classرا شرطی کن.- میان بُر
:کوتاه و خواناست.
دایرکتیوها را مرور کن و سپس به v-if برو برای شرط ها.