Vue-da hodisa orqali forma ma'lumotlarini olish
Faraz qilaylik, bizda tugmacha va unga son kiritiladigan input maydoni mavjud. Tugmacha bosilganda inputga kiritilgan sonning kvadratini chiqaramiz. Keling, amalga oshirishni boshlaymiz.
Masalani yechish uchun bizga ikkita xususiyat kerak bo'ladi. num xususiyati
inputga ma'lumot kiritilishi bilan o'zgaradi,
res xususiyatiga esa
kvadratga ko'tarish natijasini yozamiz:
data() {
return {
num: 0,
res: 0
}
}
Keling, endi input yarataylik,
unga num xususiyatini bog'laylik, tugmacha yarataylik,
unga bosilganda calc metodi ishlaydigan qilaylik,
shuningdek, natija chiqariladigan paragraf ham yarataylik:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">work</button>
</template>
Keling, calc metodini amalga oshiramiz:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
Natijada, calc metodi chaqirilganda
(bu tugmacha bosilganda sodir bo'ladi), res xususiyatiga
natija yoziladi va shu bilan birga paragrafimizda ham chiqadi.
Input maydoni berilgan. Tugmacha berilgan. Paragraf berilgan. Inputga son kiritiladi. Tugmacha bosilganda paragrafda shu sonning ildizi paydo bo'ladigan qiling.
Ikkita input maydoni berilgan. Tugmacha berilgan. Paragraf berilgan. Har bir inputga sonlar kiritiladi. Tugmacha bosilganda paragrafda bu sonlar yig'indisi paydo bo'ladigan qiling.
Ikkita input maydoni berilgan. Tugmacha berilgan. Har bir inputga ma'lum bir matn kiritiladi. Tugmacha bosilganda birinchi inputdagi matn ikkinchisiga, ikkinchisidagi matn birinchisiga o'tadigan qiling.
Input maydoni, 3 ta paragraf va tugmacha berilgan. Inputga
foydalanuvchi FISi probel orqali kiritiladi. Tugmacha bosilganda birinchi
paragrafda foydalanuvchi familiyasi, ikkinchisida - ismi,
uchinchisida - sharifi paydo bo'ladigan qiling.
