Vue v-bind
Siz allaqachon Vue-ning asosiy sozlamalari Vue misolidan iboratligini va biz unga {{ }} yoki v-bind direktivasi bilan <div id="app"> tegidan kirishimiz mumkinligini ko‘rgansiz.
Ushbu sahifada biz v-bind direktivasini batafsilroq tushuntiramiz.
v-bind direktivasi
V-bind direktivasi HTML atributini Vue misolidagi ma’lumotlarga ulash imkonini beradi. Bu atribut qiymatini dinamik ravishda o‘zgartirishni osonlashtiradi.
Sintaksis
<div v-bind:[attribute]="[Vue data]"></div>
Misol
<img> tegining src atribut qiymati Vue namunasi ma’lumotlari “url” xususiyatidan olingan:
<img v-bind:src="url">
O‘zingiz sinab ko‘ring »
CSS ulanishi
In-line uslublarini bajarish va sinflarni dinamik ravishda o‘zgartirish uchun v-bind direktivasidan foydalanishimiz mumkin. Buni qanday qilishni ushbu bo‘limda qisqacha ko‘rsatamiz va keyinroq ushbu qo‘llanmada CSS Binding sahifasida buni batafsilroq tushuntiramiz.
Bog‘lash uslubi
Vue bilan chiziqli uslublar uslub atributini Vue bilan v-bind bilan bog‘lash orqali amalga oshiriladi.
v-bind direktivasiga qiymat sifatida biz CSS xususiyati va qiymatiga ega JavaScript obyektini yozishimiz mumkin:
Misol
Shrift o‘lchami Vue ma’lumotlarining "size" xususiyatiga bog‘liq.
<div v-bind:style="{ fontSize: size }">
Text example
</div>
O‘zingiz sinab ko‘ring »
Agar xohlasak, shrift o‘lchami raqami qiymatini shrift o‘lchami birligidan ajratishimiz mumkin, masalan:
Misol
Shrift o‘lchami raqami qiymati Vue ma’lumotlar xususiyati "size" saqlanadi.
<div v-bind:style="{ fontSize: size + 'px' }">
Text example
</div>
O‘zingiz sinab ko‘ring »
Biz CSS xususiyati nomini CSS sintaksisi (kabob-rejismoz) bilan tire ichida yozishimiz ham mumkin, ammo bu tavsiya etilmaydi:
Misol
CSS-ning fontSize xususiyati "shrift o‘lchami" deb ataladi.
<div v-bind:style="{ 'font-size': size + 'px' }">
Text example
</div>
O‘zingiz sinab ko‘ring »
Misol
Fon rangi Vue misolidagi "bgVal" ma’lumotlar xususiyati qiymatiga bog‘liq.
<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
Notice the background color on this div tag.
</div>
O‘zingiz sinab ko‘ring »
Misol
Fon rangi "isImportant" ma’lumotlar xususiyati qiymatining "haqiqiy" yoki "noto‘g‘ri" ekanligiga qarab JavaScript shartli (uchlik) ifodasi bilan o‘rnatiladi.
<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
Conditional background color
</div>
O‘zingiz sinab ko‘ring »
Sinfni bog‘lash
Biz class atributini o‘zgartirish uchun v-bind dan foydalanishimiz mumkin.
v-bind:class qiymati o‘zgaruvchi bo‘lishi mumkin:
Misol
Class nomi "className" Vue ma’lumotlar xususiyatidan olingan:
<div v-bind:class="className">
The class is set with Vue
</div>
O‘zingiz sinab ko‘ring »
v-bind:class qiymati ham obyekt bo‘lishi mumkin, bu yerda class nomi faqat "true"ga o‘rnatilgan bo‘lsa kuchga kiradi:
Misol
Class atributi "myClass" klassi "haqiqiy" yoki "noto‘g‘ri" ga o‘rnatilganligiga qarab tayinlanadi yoki tayinlanmaydi:
<div v-bind:class="{ myClass: true }">
The class is set conditionally to change the background color
</div>
O‘zingiz sinab ko‘ring »
v-bind:class qiymati obyekt bo‘lsa, class Vue xususiyatiga qarab tayinlanishi mumkin:
Misol
Class atributi "isImportant" xususiyatiga qarab tayinlanadi, agar u "true" yoki "false" bo‘lsa:
<div v-bind:class="{ myClass: isImportant }">
The class is set conditionally to change the background color
</div>
O‘zingiz sinab ko‘ring »
v-bind uchun stenografiya
"V-bind:" ning qisqartmasi oddiygina ":" dir.
Misol
Bu yerda biz "v-bind:" o‘rniga ":" yozamiz:
<div :class="{ impClass: isImportant }">
The class is set conditionally to change the background color
</div>
O‘zingiz sinab ko‘ring »
Biz chalkashmaslik uchun ushbu qo‘llanmada v-bind: sintaksisidan foydalanishda davom etamiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!