Preuzimanje podataka iz forme preko događaja u Vue-u

Pretpostavimo da imamo dugme i input polje u koje se unosi broj. Hajde da pritiskom na dugme prikažemo kvadrat broja unetog u input. Pristupimo realizaciji.

Za rešavanje zadatka trebaće nam dve osobine. Osobina num će se menjati kako se podaci unose u input, a u osobinu res ćemo upisivati rezultat kvadriranja:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

Hajde sada da napravimo input, povežemo ga sa osobinom num, napravimo dugme, čijim klikom će se izvršiti metoda calc, i napravimo takođe pasus u koji će biti ispisan rezultat:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">work</button>
</template>

Hajde da napišemo implementaciju metode calc:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

Ispostavlja se da čim bude pozvana metoda calc (a to će se desiti pritiskom na dugme), u osobinu res biće upisan rezultat i istovremeno će se prikazati u našem pasusu.

Задание 1

Dat je input. Dat je button. Dat je pasus. U input se unosi broj. Uredite tako da pritiskom na dugme u pasusu se pojavi kvadratni koren tog broja.

Задание 2

Data su dva input polja. Dat je button. Dat je pasus. U svako input polje se unosi broj. Uredite tako da pritiskom na dugme u pasusu se pojavi zbir tih brojeva.

Задание 3

Data su dva input polja. Dat je button. U svako input polje se unosi neki tekst. Uredite tako da pritiskom na dugme tekst iz prvog input polja pređe u drugi i obrnuto.

Задание 4

Dat je input, 3 pasusa i button. U input se unosi puno ime korisnika kroz razmak. Uredite tako da pritiskom na dugme u prvom pasus se pojavi prezime korisnika, u drugom - ime, a u trećem - patronim.