Mendapatkan Data Borang Mengikut Peristiwa dalam Vue

Katakan kita ada butang dan input, di mana nombor dimasukkan. Mari upon tekan butang kita paparkan kuasa dua nombor yang dimasukkan ke dalam input itu. Mari kita mulakan pelaksanaannya.

Untuk menyelesaikan masalah ini, kita memerlukan dua sifat. Sifat num akan berubah semasa data dimasukkan ke dalam input, dan dalam sifat res kita akan merekodkan hasil kuasa dua:

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

Sekarang mari buat input, ikatkan kepadanya sifat num, buat butang, yang upon klik akan menjalankan kaedah calc, dan juga buat perenggan, di mana hasil akan dipaparkan:

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

Mari tulis pelaksanaan kaedah calc:

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

Jadi, sebaik sahaja kaedah calc dipanggil (ini akan berlaku upon tekan butang), sifat res akan merekodkan hasil dan pada masa yang sama dipaparkan dalam perenggan kita.

Diberi input. Diberi butang. Diberi perenggan. Nombor dimasukkan ke dalam input. Buat supaya upon tekan pada butang, dalam perenggan muncul punca kuasa dua nombor tersebut.

Diberi dua input. Diberi butang. Diberi perenggan. Nombor dimasukkan ke dalam setiap input. Buat supaya upon tekan pada butang, dalam perenggan muncul hasil tambah nombor-nombor ini.

Diberi dua input. Diberi butang. Teks dimasukkan ke dalam setiap input. Buat supaya upon tekan pada butang, teks input pertama menjadi di kedua dan sebaliknya.

Diberi input, 3 perenggan dan butang. Nama penuh pengguna dimasukkan ke dalam input dipisahkan oleh ruang. Buat supaya upon tekan pada butang, dalam perenggan pertama muncul nama keluarga pengguna, dalam kedua - nama pertama, dan dalam ketiga - nama bapa.