Data Binding Dua Arah ke Input di Vue

Sekarang kita akan belajar bekerja dengan input dalam framework Vue. Dengan menggunakannya, kita akan menambahkan data ke halaman secara reaktif. Mari kita mulai. Misalkan kita memiliki input:

<template>
	<input>
</template>

Misalkan juga kita memiliki properti message:

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

Kita dapat menghubungkan properti ini dan input sedemikian rupa sehingga perubahan pada salah satunya menyebabkan perubahan pada yang lain. Ini dilakukan dengan menggunakan direktif v-model, yang di dalamnya ditentukan properti yang terikat pada input.

Mari kita bind properti message ke input kita:

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

Setelah menjalankan kode, di input akan muncul teks dari properti message. Dan jika data di input diedit - properti juga akan berubah sesuai. Untuk melihatnya, mari tampilkan konten yang dimasukkan ke input di suatu tempat dalam paragraf:

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

Diberikan sebuah input. Buatlah agar teks yang dimasukkan ke dalam input langsung ditampilkan di paragraf di bawahnya.

Modifikasi tugas sebelumnya sehingga teks ditampilkan dalam huruf kapital.

Diberikan sebuah input. Misalkan angka dimasukkan ke dalamnya. Buatlah agar dalam paragraf, seiring dengan pengetikan, ditampilkan kuadrat dari angka yang dimasukkan.