v-bind (v-bind)
«اتصال ویژگی با v-bind» یعنی یک صفتِ HTML را به داده وصل کنیم. «داده واکنشی (Reactive Data)» داده ای است که تغییرش، UI را تازه می کند. مثل برچسب نام روی دفتر که هر وقت عوض شود، روی جلد هم عوض می شود.
تعریف و کاربرد v-bind
v-bind یک «دایرکتیو (Directive)» است؛ یعنی دستور کوتاه در قالب. با آن، صفت ها را به داده وصل می کنیم. تغییر داده، صفت را به روز می کند. میان بر آن : است. همچنین .prop برای property و .attr برای attribute کاربرد دارد. گزینه .camel هم نام صفت را camelCase می کند.
مثال: تغییر رنگ پس زمینه با اتصال ویژگی
رنگ پس زمینه یک DIV به داده وصل می شود. سپس با ورودی رنگ، مقدار را عوض می کنیم. مثل تغییر رنگ جلد دفتر با یک ماژیک.
<template>
<div>
<h3>Example v-bind Directive</h3>
<div v-bind:style="{ backgroundColor: colorVal }">DIV element</div>
<p>Pick a color:</p>
<input type="color" v-model="colorVal" />
<pre>colorVal: '{{ colorVal }}'</pre>
</div>
</template>
<script>
export default {
data() {
return {
colorVal: '#00aaff'
};
}
};
<\/script>
ارسال prop بولی با v-bind
گاهی باید prop بولی را دقیق بفرستیم. با v-bind تضمین می کنیم مقدارِ واقعیِ بولی برود، نه رشته.
<template>
<div>
<button v-on:click="img = !img">Toggle 'img' prop</button>
{{ img }}
<info-box
turtle-text="Turtles can hold their breath for a long time."
v-bind:turtle-img="img"
/>
</div>
</template>
<script>
export default {
data() {
return {
img: true
};
}
};
<\/script>
میان بر : به جای v-bind
برای کدنویسی تمیز، از : استفاده کن. کار همان v-bind: است و کوتاه تر می نویسیم.
<template>
<div>
<button v-on:click="img = !img">Toggle 'img' prop</button>
{{ img }}
<info-box
turtle-text="Turtles can hold their breath for a long time."
:turtle-img="img"
/>
</div>
</template>
<script>
export default {
data() {
return {
img: true
};
}
};
<\/script>
تغییر DOM property با .prop
گاهی باید «property» عنصر را عوض کنیم. مانند indeterminate در چک باکس. این جا .prop لازم است.
<template>
<div>
<button v-on:click="indetVal = !indetVal">Toggle</button>
<input type="checkbox" v-bind:indeterminate.prop="indetVal" />
</div>
</template>
<script>
export default {
data() {
return {
indetVal: false
};
}
};
<\/script>
میان برِ .prop و v-bind با هم
می توانیم کوتاه تر هم بنویسیم. طبق منبع، v-bind:indeterminate.prop را به صورت کوتاه می آوریم.
<template>
<div>
<button v-on:click="indetVal = !indetVal">Toggle</button>
<input type="checkbox" .indeterminate="indetVal" />
</div>
</template>
<script>
export default {
data() {
return {
indetVal: false
};
}
};
<\/script>
گام های عملی
- عنصر را انتخاب کن؛ مثلاً DIV یا ورودی.
- با
v-bindصفت را به داده وصل کن. - داده را در
data()تعریف و مقداردهی کن. - در صورت نیاز از
.propیا.attrاستفاده کن.
نکته: برای زمانِ بعد رندر از $nextTick() کمک بگیر. همچنین فهرست کامل دایرکتیوها را در دایرکتیوها ببین.
جمع بندی سریع
v-bindصفت را به داده وصل می کند.- میان بر
:کوتاه نویسی راحتی می دهد. .propبرای property های DOM لازم است.- تغییر داده، UI را خودکار تازه می کند.