Vue CSS bog‘lash
CSS-ni uslub va class atributlari bilan o‘zgartirish uchun v-binddan qanday foydalanish haqida ko‘proq bilib oling.
V-bind bilan uslub va class atributlarini o‘zgartirish tushunchasi juda aniq bo‘lsa-da, sintaksisga biroz ko‘nikish kerak bo‘lishi mumkin.
Vue-da dinamik CSS
Uslub va class atributlarida v-bind yordamida CSS-ni o‘zgartirish uchun Vue-dan qanday foydalanishimiz mumkinligini allaqachon ko‘rgansiz. Ushbu qo‘llanmada v-bind ostida qisqacha tushuntirilgan va Vue o‘zgaruvchan CSS bilan bir nechta misollar ham berilgan.
Bu yerda biz CSS-ni Vue yordamida qanday qilib dinamik ravishda o‘zgartirish mumkinligini batafsilroq tushuntiramiz. Biroq, avval ushbu qo‘llanmada ko‘rgan texnikalar bilan ikkita misolni ko‘rib chiqaylik: v-bind:style bilan chiziqli uslublar va v-bind:class bilan class belgilash
Inline stil berish
Biz Vue-da in-line uslublarini yaratish uchun v-bind: style-dan foydalanamiz.
Misol
<input type="range"> elementi <div> elementining shaffofligini in-line uslublari yordamida o‘zgartirish uchun ishlatiladi.
<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>
O‘zingiz sinab ko‘ring »
Class tayinlash
Vue-da HTML tegiga class belgilash uchun v-bind:class dan foydalanamiz.
Misol
Oziq-ovqat tasvirlarini tanlang. Tanlangan taom siz tanlagan narsani ko‘rsatish uchun v-bind:class yordamida ta’kidlanadi.
<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>
O‘zingiz sinab ko‘ring »
Classlar va uslublarni belgilashning boshqa metodlari
Bu yerda v-bind:class va v-bind:style dan foydalanishning turli jihatlari mavjud, ularni biz ushbu qo‘llanmada ilgari ko‘rmaganmiz:
- CSS classlari HTML tegiga class="" va v-bind:class="" bilan tayinlanganda Vue sinflarni birlashtiradi.
- Bir yoki bir nechta sinflarni o‘z ichiga olgan obyekt v-bind:class="{}" bilan tayinlanadi. Obyekt ichida bir yoki bir nechta sinflarni yoqish yoki o‘chirish mumkin.
- In-line uslublari (v-bind:style) bilan CSS xususiyatini belgilashda camelCase afzalroqdir, lekin agar u tirnoq ichida yozilgan bo‘lsa, "kabob-case" dan ham foydalanish mumkin.
- CSS classlari massivlar / massiv belgilari / sintaksisi bilan tayinlanishi mumkin
Ushbu fikrlar quyida batafsilroq tavsiflanadi.
1. Vue "class" va "v-bind: class" ni birlashtiradi
Agar HTML tegi class="" bilan tayinlangan sinfga tegishli bo‘lsa va v-bind:class=" bilan ham sinfga tayinlangan bo‘lsa, Vue biz uchun sinflarni birlashtiradi.
Misol
<div> elementi ikkita sinfga tegishli: 'impClass' va 'yelClass'. "Muhim" class class atributi bilan normal tarzda o‘rnatiladi va "sariq" class v-bind:class bilan o‘rnatiladi.
<div class="impClass" v-bind:class="{yelClass: isYellow}">
This div belongs to both 'impClass' and 'yelClass'.
</div>
O‘zingiz sinab ko‘ring »
2. 'v-bind:class' bilan bir nechta sinflarni tayinlash
HTML elementini v-bind:class="{}" bilan sinfga tayinlashda biz bir nechta sinflarni ajratish va belgilash uchun oddiygina verguldan foydalanishimiz mumkin.
Misol
<div> elementi mantiqiy Vue ma’lumotlarining “isYellow” va “isImportant” xususiyatlariga qarab “impClass” va “yelClass” sinflariga tegishli bo‘lishi mumkin.
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
This tag can belong to both the 'impClass' and 'yelClass' classes.
</div>
O‘zingiz sinab ko‘ring »
3. “v-bind:style” bilan camelCase va kebab-case yozuvi
Vue-da CSS-ni chiziqli uslub bilan (v-bind:style) o‘zgartirganda, CSS xususiyati uchun camel Case belgisidan foydalanish tavsiya etiladi, ammo CSS xususiyati tirnoq ichida bo‘lsa, "kabob-case" dan ham foydalanish mumkin.
Misol
Bu yerda biz <div> elementi uchun background-color va font-weight CSS xususiyatlarini ikki xil usulda o‘rnatamiz: tavsiya etilgan usul — camelCase ko‘rinishida backgroundColor , va tavsiya etilmaydigan usul — qo‘shtirnoq ichidagi kebab-case ko‘rinishida 'font-weight' . Ikkala variant ham ishlaydi.
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
This div tag has pink background and bold text.
</div>
O‘zingiz sinab ko‘ring »
“camelCase” va “kebab-case” yozuvlari bir nechta so‘zni bo‘sh joy va tinish belgilarisiz ketma-ket yozish usullaridir.
- camelCase yozuvida birinchi so‘z kichik harf bilan, undan keyingi har bir so‘z esa bosh harf bilan boshlanadi, masalan, "backgroundColor" yoki "camelCaseNotation". U camelCase (inglizcha camel — tuya) deb ataladi, chunki har bir bosh harfni tuya orqasidagi o‘rkachga o‘xshatish mumkin.
- Kabob holati belgilanishi bu so‘zlar tire bilan ajratilganda, masalan, “fon rangi” yoki “kabob ko‘rinishi” belgisi. Bu kabob qutisi deb ataladi, chunki biz "shish kabob"dagi shishka o‘xshash chiziqlarni tasavvur qilishimiz mumkin.
4. 'v-bind:class' bilan massiv sintaksisi
Bir nechta sinflarni qo‘shish uchun massiv sintaksisini v-bind:class bilan ishlatishimiz mumkin. Massiv sintaksisi bilan biz Vue xususiyatiga bog‘liq bo‘lgan ikkala classdan ham, Vue xususiyatiga bog‘liq bo‘lmagan sinflardan ham foydalanishimiz mumkin.
Misol
Bu yerda biz massiv sintaksisi bilan "impClass" va "yelClass" CSS sinflarini o‘rnatdik. "impClass" klassi isImportant Vue xususiyatiga bog‘liq va "yelClass" klassi har doim <div> elementiga biriktirilgan.
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
This div tag belongs to one or two classes depending on the isImportant property.
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!