Získávání dat z formuláře po události ve Vue

Předpokládejme, že máme tlačítko a vstupní pole, do kterého se zadává číslo. Po stisknutí tlačítka vypišme druhou mocninu čísla zadaného do vstupního pole. Pojďme se pustit do implementace.

K řešení úlohy budeme potřebovat dvě vlastnosti. Vlastnost num se bude měnit při zadávání dat do vstupního pole a do vlastnosti res budeme zapisovat výsledek umocnění na druhou:

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

Nyní vytvořme vstupní pole, přivažme k němu vlastnost num, vytvořme tlačítko, jehož kliknutím se spustí metoda calc, a vytvořme také odstavec, do kterého se bude vypisovat výsledek:

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

Napišme implementaci metody calc:

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

Výsledkem bude, že jakmile bude volána metoda calc (což se stane po stisknutí tlačítka), do vlastnosti res se zapíše výsledek a současně se zobrazí v našem odstavci.

Задание 1

Je dán vstup. Je dáno tlačítko. Je dán odstavec. Do vstupu se zadává číslo. Zařiďte, aby po stisknutí tlačítka se v odstavci objevila druhá odmocnina tohoto čísla.

Задание 2

Jsou dána dvě vstupní pole. Je dáno tlačítko. Je dán odstavec. Do každého vstupního pole se zadávají čísla. Zařiďte, aby po stisknutí tlačítka se v odstavci objevila součet těchto čísel.

Задание 3

Jsou dána dvě vstupní pole. Je dáno tlačítko. Do každého vstupního pole se zadává nějaký text. Zařiďte, aby po stisknutí tlačítka se text z prvního vstupního pole objevil ve druhém a naopak.

Задание 4

Je dán vstup, 3 odstavce a tlačítko. Do vstupu se zadává jméno a příjmení uživatele oddělené mezerou. Zařiďte, aby po stisknutí tlačítka se v prvním odstavci objevilo příjmení uživatele, ve druhém - jméno, a ve třetím - patronymum.