Arbete med radio i Vue

Arbetet med radio sker på ett liknande sätt. Låt oss titta praktiskt. Till att börja med, låt oss skapa egenskapen choice, som vi kommer att binda till en grupp av radio:

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

Låt oss nu skapa en grupp av radio:

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

Låt oss skriva direktivet v-model för var och en av dem och bind den till egenskapen 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>

Låt oss också ge var och en av dem sitt eget 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>

Nu kommer egenskapen choice alltid innehålla value från den markerade radio:

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

Fråga användaren med hjälp av en grupp av radio, vilket språk som är hans modersmål. Gör så att det valda språket visas i ett stycke.

Modifiera den föregående uppgiften på följande sätt: låt oss ha tre stycken med text på olika språk. Beroende på användarens val, visa frasen på det språk som han valde.