Vue v-model
Oddiy JavaScript bilan solishtirganda, Vue-da shakllar bilan ishlash osonroq, chunki v-model direktivasi barcha turdagi kirish elementlari bilan bir xil tarzda bog‘lanadi.
v-modeli Vue misolidagi kirish elementi qiymati atributi va ma’lumotlar qiymati o‘rtasida bog‘lanish hosil qiladi. Kirishni o‘zgartirsangiz, ma’lumotlar yangilanadi va ma’lumotlar o‘zgarganda, kirish ham yangilanadi (ikki tomonlama ulanish).
Ikki tomonlama bog‘lash
Oldingi sahifadagi xarid ro‘yxati misolida ko‘rganimizdek, v-modeli bizga ikki tomonlama bog‘lanishni ta’minlaydi, ya’ni shakl kiritish elementlari Vue ma’lumotlar namunasini yangilaydi va Vue namunasi ma’lumotlaridagi o‘zgarish kirishlarni yangilaydi.
Quyidagi misolda v-model bilan ikki tomonlama bog‘lanish ham ko‘rsatilgan.
Misol
Ikki tomonlama ulanish: Vue ma’lumotlar xususiyati qiymati yangilanishini ko‘rish uchun kiritish maydoniga yozishga harakat qiling. Vue ma’lumotlar xususiyati qiymatini o‘zgartirish, kodni ishga tushirish va kirish maydoni qanday yangilanganligini ko‘rish uchun to‘g‘ridan-to‘g‘ri kodga yozishga harakat qiling.
<div id="app">
<input type="text" v-model="inpText">
<p> {{ inpText }} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpText: 'Initial text'
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Eslatma: v-modelining ikki tomonlama ulanish funksiyasiga aslida v-bind:value va v-on:kiritish kombinatsiyasi bilan erishish mumkin:
- v-bind: Vue namunasi ma’lumotlaridan kirish elementini yangilash uchun qiymat,
- va v-on: kirishdan Vue misol ma’lumotlarini yangilash uchun.
Ammo v-modeldan foydalanish ancha oson, shuning uchun biz shunday qilamiz.
Dinamik tasdiqlash qutisi
Oldingi sahifadagi xaridlar ro‘yxatiga element muhim yoki muhim emasligini belgilash uchun katakchani qo‘shamiz.
Belgilash katagiga biz har doim joriy "muhim" holatini aks ettiruvchi, "to‘g‘ri" yoki "noto‘g‘ri" o‘rtasida dinamik ravishda o‘zgarib turadigan matnni qo‘shamiz.
Biz ushbu dinamik katakchani va foydalanuvchi o‘zaro ta’sirini yaxshilash uchun matnni qo‘shish uchun v-modeldan foydalanamiz.
Bizga kerak:
- Vue misoli ma’lumotlar xususiyatidagi "muhim" deb nomlangan mantiqiy qiymat
- foydalanuvchi element muhimligini tekshirishi mumkin bo‘lgan katakcha
- foydalanuvchi element muhimligini ko‘rishi uchun dinamik fikr-mulohaza matni
Quyida xaridlar ro‘yxatidan ajratilgan "muhim" xususiyat qanday ko‘rinishini ko‘rib chiqamiz.
Misol
Belgilash qutisi matni dinamik bo‘lib, matn joriy tasdiqlash qutisi kiritish qiymatini aks ettiradi.
<div id="app">
<form>
<p>
Important item?
<label>
<input type="checkbox" v-model="important">
{{ important }}
</label>
</p>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
important: false
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Keling, ushbu dinamik xususiyatni xaridlar ro‘yxati misolimizga kiritaylik.
Misol
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<hr>
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
important: this.itemImportant
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Xarid ro‘yxatida topilgan narsalarni belgilang
Xarid qilish ro‘yxatiga qo‘shilgan narsalar topilgan deb belgilanishi uchun funksionallikni qo‘shamiz.
Bizga kerak:
- bosish orqali javob beradigan massiv elementlari
- bosilgan elementning holatini "topildi" ga o‘zgartirish uchun va undan elementni vizual ravishda boshqa joyga ko‘chirish va CSS orqali urish uchun foydalaning.
Biz topishimiz kerak bo‘lgan barcha elementlardan iborat bitta massiv va chizilgan narsalar bilan quyida bitta massiv yaratamiz. Biz aslida birinchi ro‘yxatdagi barcha elementlarni va ikkinchi ro‘yxatdagi barcha elementlarni qo‘yishimiz mumkin va elementni birinchi yoki ikkinchi ro‘yxatda ko‘rsatishni aniqlash uchun “topilgan” Vue ma’lumotlar xususiyati bilan v-show-dan foydalanishimiz mumkin.
Misol
Xarid qilish ro‘yxatiga narsalarni qo‘shgandan so‘ng, biz ularni topib bo‘lgach, ularni bosish orqali xarid qilish uchun ketayotgandek ko‘rsatishimiz mumkin. Agar biror elementni xato bilan bosgan bo‘lsak, elementni yana bir marta bosish orqali uni "topilmadi" ro‘yxatiga qaytarishimiz mumkin.
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<p><strong>Shopping list:</strong></p>
<ul id="ulToFind">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="!item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
<ul id="ulFound">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false, found: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber,
important: this.itemImportant,
found: false
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Shaklning o‘zini dinamik qilish uchun v-modeldan foydalaning
Biz mijoz menyudan tartib beradigan shaklni yaratishimiz mumkin. Mijoz uchun qulay bo‘lishi uchun biz faqat mijoz ichimliklar tartib qilishni tanlaganidan keyin tanlash uchun ichimliklarni taqdim etamiz. Bu mijozga menyudagi barcha narsalarni bir vaqtning o‘zida taqdim etishdan ko‘ra yaxshiroq deb bahslash mumkin. Ushbu misolda biz shaklni dinamik qilish uchun v-model va v-show-dan foydalanamiz.
Bizga kerak:
- Tegishli input teglari va "Buyurtma" tugmasi bo‘lgan forma.
- "Kechki ovqat", "Ichimlik" yoki "Desert" ni tanlash uchun radio tugmalari.
- Kategoriya tanlanganidan so‘ng, ushbu toifadagi barcha elementlar bilan ochiladigan menyu paydo bo‘ladi.
- Mahsulot tanlanganda uning rasmini ko‘rasiz, miqdorini tanlab, uni buyurtmaga qo‘shishingiz mumkin. Mahsulot buyurtmaga qo‘shilgach, forma qayta tiklanadi.
Misol
Ushbu forma dinamik. U foydalanuvchi tanloviga qarab o‘zgaradi. Buyurtma tugmasi paydo bo‘lishi va foydalanuvchi buyurtma bera olishi uchun u avval toifani, so‘ng mahsulotni va uning miqdorini tanlashi kerak.
O‘zingiz sinab ko‘ring »W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!