Pengikatan Data Dua Hala kepada Input dalam Vue

Sekarang kita akan belajar bekerja dengan input dalam rangka kerja Vue. Dengan menggunakannya, kita akan menambahkan data secara reaktif ke halaman. Mari kita mulakan. Katakan kita mempunyai input:

<template>
	<input>
</template>

Katakan juga kita mempunyai properti message:

data() {
	return {
		message: 'hello',
	}
}

Kita boleh mengaitkan properti ini dan input dengan cara sedemikian rupa sehingga perubahan pada mana-mana satu daripadanya akan menyebabkan perubahan pada yang lain. Ini dilakukan dengan menggunakan direktif v-model, di mana properti yang terikat kepada input dinyatakan.

Mari kita ikat properti message kepada input kita:

<template>
	<input v-model="message">
</template>

Selepas menjalankan kod, teks dari properti message akan berada dalam input. Dan jika data dalam input disunting - properti juga akan berubah sewajarnya. Untuk melihatnya, mari kita paparkan kandungan yang dimasukkan ke dalam input di suatu tempat dalam perenggan:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Diberikan satu input. Lakukan supaya teks yang dimasukkan ke dalam input serta-merta dipaparkan dalam perenggan di bawahnya.

Ubahsuai tugas sebelumnya supaya teks dipaparkan dalam huruf besar.

Diberikan satu input. Katakan nombor dimasukkan ke dalamnya. Lakukan supaya dalam perenggan, semasa memasukkan, kuasa dua nombor yang dimasukkan dipaparkan.