Pobieranie danych formularza na podstawie zdarzenia w Vue

Załóżmy, że mamy przycisk i pole wprowadzania, do którego wpisywana jest liczba. Po naciśnięciu przycisku wyświetlmy kwadrat liczby wprowadzonej w pole. Przejdźmy do implementacji.

Aby rozwiązać zadanie, będziemy potrzebować dwóch właściwości. Właściwość num będzie zmieniać się podczas wprowadzania danych do pola, a do właściwości res będziemy zapisywać wynik podniesienia do kwadratu:

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

Stwórzmy teraz pole wprowadzania, powiążmy z nim właściwość num, stwórzmy przycisk, po kliknięciu którego będzie wykonywana metoda calc, a także stwórzmy akapit, do którego będzie wypisywany wynik:

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

Napiszmy implementację metody calc:

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

Okaże się, że jak tylko metoda calc zostanie wywołana (a stanie się to po naciśnięciu przycisku), do właściwości res zostanie zapisany wynik i jednocześnie wyświetli się w naszym akapicie.

Задание 1

Dane jest pole wprowadzania. Dany jest przycisk. Dany jest akapit. Do pola wprowadzania wpisywana jest liczba. Spraw, aby po naciśnięciu przycisku w akapicie pojawił się pierwiastek kwadratowy tej liczby.

Задание 2

Dane są dwa pola wprowadzania. Dany jest przycisk. Dany jest akapit. Do każdego pola wprowadzania wpisywane są liczby. Spraw, aby po naciśnięciu przycisku w akapicie pojawiła się suma tych liczb.

Задание 3

Dane są dwa pola wprowadzania. Dany jest przycisk. Do każdego pola wprowadzania wpisywany jest jakiś tekst. Spraw, aby po naciśnięciu przycisku tekst z pierwszego pola znalazł się w drugim i na odwrót.

Задание 4

Dane jest pole wprowadzania, 3 akapity i przycisk. Do pola wprowadzania wpisywane jest imię i nazwisko użytkownika oddzielone spacją. Spraw, aby po naciśnięciu przycisku w pierwszym akapicie pojawiło się nazwisko użytkownika, w drugim - imię, a w trzecim - drugie imię.