Penggunaan Radio dalam Vue

Penggunaan radio dilakukan dengan cara yang serupa. Mari kita lihat secara praktik. Pertama, buat sifat choice yang akan kita ikat kepada kumpulan radio:

data() {
	return {
		choice: '',
	}
}

Sekarang buat kumpulan radio:

<template>
	<input name="radio" type="radio">
	<input name="radio" type="radio">
	<input name="radio" type="radio">
</template>

Tuliskan arahan v-model untuk setiap satu dan ikatkannya dengan sifat choice:

<template>
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
</template>

Berikan juga setiap satu value mereka sendiri:

<template>
	<input name="radio" type="radio" v-model="choice" value="v1">
	<input name="radio" type="radio" v-model="choice" value="v2">
	<input name="radio" type="radio" v-model="choice" value="v3">
</template>

Sekarang dalam sifat choice akan sentiasa terdapat value daripada radio yang ditanda:

<template>
	anda memilih: {{ choice }}
</template>

Tanya pengguna menggunakan kumpulan radio, bahasa mana yang merupakan bahasa ibunda mereka. Buat supaya bahasa yang dipilih dipaparkan dalam perenggan.

Ubah suai tugas sebelumnya seperti berikut: katakan kita mempunyai tiga perenggan dengan teks dalam bahasa yang berbeza. Bergantung pada pilihan pengguna, paparkan frasa dalam bahasa yang dipilih oleh mereka.