Атрыманне даных формы па падзеі ў Vue

Няхай у нас ёсць кнопка і інпут, у які ўводзіцца лік. Давайце па націску на кнопку вывядзем квадрат уведзенага ў інпут ліку. Прыступім да рэалізацыі.

Для рашэння задачы нам спатрэбіцца два ўласцівасці. Уласцівасць num будзе змяняцца па меры ўводу даных у інпут, а ва ўласцівасць res мы будзем запісваць рэзультат узвядзення ў квадрат:

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

Давайце цяпер зробім інпут, прывяжам да яго ўласцівасць num, зробым кнопку, па кліку на якую будзе выконвацца метад calc, і зробім таксама абзац, у які будзе вывадзіцца рэзультат:

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

Давайце напішам рэалізацыю метаду calc:

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

Атрымаецца, што як толькі будзе выкліканы метад calc (а гэта адбудзецца па націску на кнопку), ва ўласцівасць res запiшацца рэзультат і пры гэтым адначасова выведзецца ў нашым абзацы.