Vue-ում տվյալների երկկողմանի կապում մուտքագրման դաշտերի հետ
Այժմ մենք կսովորենք աշխատել մուտքագրման դաշտերի հետ Vue-ի ֆրեյմվորքում: Դրանց օգնությամբ մենք ռեակտիվ կերպով կավելացնենք տվյալներ էջում: Եկեք սկսենք: Ենթադրենք, մենք ունենք մուտքագրման դաշտ:
<template>
<input>
</template>
Ենթադրենք նաև, որ մենք ունենք
message հատկությունը:
data() {
return {
message: 'hello',
}
}
Մենք կարող ենք կապել այս հատկությունը և մուտքագրման դաշտն այնպես,
որ դրանցից որևէ մեկի փոփոխությունը
հանգեցնի մյուսի փոփոխության:
Դա արվում է v-model դիրեկտիվի միջոցով,
որտեղ նշվում է մուտքագրման դաշտին կապված հատկությունը:
Եկեք կապենք մեր մուտքագրման դաշտին
message հատկությունը:
<template>
<input v-model="message">
</template>
Կոդը գործարկելուց հետո մուտքագրման դաշտում կլինի
message հատկության տեքստը:
Իսկ եթե խմբագրել մուտքագրման դաշտի տվյալները, ապա հատկությունը նույնպես կփոխվի
համապատասխան կերպով: Սա տեսնելու համար
եկեք արտածենք մուտքագրման դաշտում մուտքագրված պարունակությունը
ինչ-որ տեղ պարբերությունում:
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
Տրված է մուտքագրման դաշտ: Արվեք այնպես, որ մուտքագրման դաշտում մուտքագրված տեքստը անմիջապես արտածվի դրա տակ գտնվող պարբերությունում:
Փոփոխեք նախորդ առաջադրանքն այնպես, որ տեքստը արտածվի վերին ռեգիստրում:
Տրված է մուտքագրման դաշտ: Ենթադրենք, դրանում մուտքագրվում է թիվ: Արվեք այնպես, որ պարբերությունում մուտքագրման ընթացքում արտածվի մուտքագրված թվի քառակուսին:
