Darbas su radio Vue

Darbas su radio vyksta panašiu būdu. Pažiūrėkime praktiškai. Pirmiausia sukurkime savybę choice, kurią mes pririšime prie radio grupės:

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

Dabar sukurkime radio grupę:

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

Kiekvienam iš jų parašykime direktyvą v-model ir pririškime prie jos savybę 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>

Taip pat suteikkime kiekvienam iš jų savo value:

<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>

Dabar savybėje choice visada bus value pažymėto radio:

<template>
	you choosed: {{ choice }}
</template>

Paklauskite vartotojo, naudodami radio grupę, kuri kalba yra jo gimtoji. Padarykite taip, kad pasirinkta kalba būtų išvesta pastraipoje

Modifikuokite ankstesnį uždavinį tokiu būdu: tegu mes turime tris pastraipas su tekstu skirtinga kalba. Atsižvelgdami į vartotojo pasirinkimą, išveskite frazę pasirinkta kalba.