Mendapatkan Data Form Berdasarkan Peristiwa di Vue

Misalkan kita memiliki sebuah tombol dan input, di mana angka dimasukkan. Mari saat tombol ditekan, kita tampilkan kuadrat dari angka yang dimasukkan ke dalam input. Mari kita mulai implementasinya.

Untuk menyelesaikan tugas ini, kita membutuhkan dua properti. Properti num akan berubah seiring data dimasukkan ke dalam input, dan ke dalam properti res kita akan mencatat hasil perpangkatan kuadrat:

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

Sekarang mari buat input, hubungkan dengan properti num, buat tombol, yang ketika diklik akan menjalankan metode calc, dan buat juga paragraf, ke mana hasil akan ditampilkan:

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

Mari kita tulis implementasi metode calc:

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

Jadinya, begitu metode calc dipanggil (dan ini terjadi saat tombol ditekan), ke dalam properti res akan tercatat hasilnya dan secara bersamaan akan ditampilkan di paragraf kita.

Diberikan sebuah input. Diberikan sebuah tombol. Diberikan sebuah paragraf. Ke dalam input dimasukkan sebuah angka. Buatlah agar saat tombol ditekan di paragraf muncul akar kuadrat dari angka tersebut.

Diberikan dua input. Diberikan sebuah tombol. Diberikan sebuah paragraf. Ke setiap input dimasukkan angka. Buatlah agar saat tombol ditekan di paragraf muncul jumlah dari angka-angka tersebut.

Diberikan dua input. Diberikan sebuah tombol. Ke setiap input dimasukkan beberapa teks. Buatlah agar saat tombol ditekan teks dari input pertama berpindah ke input kedua dan sebaliknya.

Diberikan sebuah input, 3 paragraf dan sebuah tombol. Ke dalam input dimasukkan Nama Lengkap pengguna dipisahkan spasi. Buatlah agar saat tombol ditekan di paragraf pertama muncul nama keluarga pengguna, di paragraf kedua - nama depan, dan di paragraf ketiga - nama tengah.