Kry van vorm data by gebeurtenis in Vue
Kom ons het 'n knoppie en 'n invoerveld waar 'n nommer ingetik word. Kom ons wys die kwadraat van die nommer wat in die invoerveld getik is wanneer die knoppie gedruk word. Kom ons begin met die implementering.
Om die probleem op te los, sal ons twee
eienskappe nodig hê. Die eienskap num
sal verander soos data in die
invoerveld ingetik word, en in die eienskap
res sal ons die
resultaat van die kwadraat skryf:
data() {
return {
num: 0,
res: 0
}
}
Kom ons maak nou die invoerveld, koppel dit
aan die eienskap num, maak 'n knoppie
wat die metode calc sal uitvoer wanneer daarop geklik word,
en maak ook 'n paragraaf waarin die
resultaat gewys sal word:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">werk</button>
</template>
Kom ons skryf die implementering van die metode calc:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
Die resultaat is dat sodra die metode
calc genoem word (wat sal gebeur wanneer die
knoppie gedruk word), die resultaat in die eienskap res geskryf sal word
en terselfdertyd in ons paragraaf gewys sal word.
Daar is 'n invoerveld. Daar is 'n knoppie. Daar is 'n paragraaf. 'n Nommer word in die invoerveld getik. Maak dit sodat wanneer die knoppie gedruk word, die vierkantswortel van die nommer in die paragraaf verskyn.
Daar is twee invoervelde. Daar is 'n knoppie. Daar is 'n paragraaf. Nommers word in elke invoerveld getik. Maak dit sodat wanneer die knoppie gedruk word, die som van hierdie nommers in die paragraaf verskyn.
Daar is twee invoervelde. Daar is 'n knoppie. Enige teks word in elke invoerveld getik. Maak dit sodat wanneer die knoppie gedruk word, die teks van die eerste invoerveld na die tweede oorgaan en andersom.
Daar is 'n invoerveld, 3 paragrawe en 'n knoppie. 'n Gebruiker se volle naam
word met spasies in die invoerveld getik. Maak dit
sodat wanneer die knoppie gedruk word, die van
in die eerste paragraaf verskyn,
in die tweede - die voornaam, en in die derde - die middelnaam.
