Adatok lekérése űrlap esemény alapján Vue-ban

Tegyük fel, hogy van egy gombunk és egy input mezőnk, amibe egy számot írunk. A gomb megnyomásakor írjuk ki a beírt szám négyzetét. Kezdjük el a megvalósítást.

A feladat megoldásához két adatproperty-re lesz szükségünk. A num property a bemeneti adatok bevitelével változik, míg a res property-be mi fogjuk beírni a négyzetre emelés eredményét:

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

Most készítsük el az input mezőt, kössük hozzá a num property-t, készítsünk egy gombot, amire kattintva a calc metódus fog lefutni, és készítsünk egy bekezdést is, amibe kiírjuk az eredményt:

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

Írjuk meg a calc metódus megvalósítását:

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

Az eredmény az lesz, hogy amint a calc metódus meg lesz hívva (ez a gomb megnyomásakor történik meg), a res property-be bekerül az eredmény, ami egyben meg is jelenik a bekezdésünkben.

Задание 1

Adott egy input mező. Adott egy gomb. Adott egy bekezdés. Az input mezőbe egy számot írunk. Állítsa be úgy, hogy a gombra kattintáskor a bekezdésben megjelenjen a szám négyzetgyöke.

Задание 2

Adott két input mező. Adott egy gomb. Adott egy bekezdés. Mindegyik input mezőbe számokat írunk. Állítsa be úgy, hogy a gomb megnyomásakor a bekezdésben megjelenjen ezen számok összege.

Задание 3

Adott két input mező. Adott egy gomb. Mindegyik input mezőbe valamilyen szöveget írunk. Állítsa be úgy, hogy a gomb megnyomásakor az első input mező szövege kerüljön a másodikba és fordítva.

Задание 4

Adott egy input mező, 3 bekezdés és egy gomb. Az input mezőbe a felhasználó teljes nevét írjuk be szóközzel elválasztva. Állítsa be úgy, hogy a gomb megnyomásakor az első bekezdésben megjelenjen a felhasználó vezetékneve, a másodikban - a keresztneve, a harmadikban pedig - a beceneve.