Vue-də hadisə əsasında form məlumatlarının alınması
Tutaq ki, bizim bir düyməmiz və ona ədəd daxil edilən bir inputumuz var. Gəlin düyməyə basdıqda inputa daxil edilən ədədin kvadratını çıxadaq. Reallaşdırmaya başlayaq.
Tapşırığı həll etmək üçün bizə iki xassə lazımdır.
num xassəsi inputa məlumat daxil edildikcə dəyişəcək,
res xassəsinə isə kvadratın nəticəsini yazacayıq:
data() {
return {
num: 0,
res: 0
}
}
Gəlin indi bir input hazırlayaq, ona num xassəsini bağlayaq,
klikləndikdə calc metodunu icra edəcək bir düymə düzəldək,
və həmçinin nəticənin çıxarılacağı bir abzas da edək:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">işlə</button>
</template>
Gəlin calc metodunun reallaşdırılmasını yazaq:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
Beləliklə, calc metodu çağırılan kimi (bu düyməyə basıldıqda baş verəcək),
res xassəsinə nəticə yazılacaq və eyni zamanda bizim abzasımızda göstəriləcək.
Bir input verilib. Bir düymə verilib. Bir abzas verilib. Inputa ədəd daxil edilir. Elə edin ki, düyməyə basdıqda abzada həmin ədədin kvadrat kökü görünsün.
Iki input verilib. Bir düymə verilib. Bir abzas verilib. Hər inputa ədədlər daxil edilir. Elə edin ki, düyməyə basdıqda abzada bu ədədlərin cəmi görünsün.
Iki input verilib. Bir düymə verilib. Hər inputa bir mətn daxil edilir. Elə edin ki, düyməyə basdıqda birinci inputun mətni ikincidə, ikincininki isə birincidə görünsün.
Bir input, 3 abzas və bir düymə verilib. Inputa istifadəçinin
A.S.I. boşluqla daxil edilir. Elə edin ki, düyməyə basdıqda birinci
abzada istifadəçinin soyadı, ikincidə adı, üçüncüdə isə atasının adı görünsün.
