Vue-да radio менен иштөө

Radio менен иштөө окшош жол менен ишке ашат. Келиңиз, практикалык жактан карап көрөлү. Адегенде, биз choice касиетин түзөбүз, аны radio тобуна байланыштырабыз:

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

Эми radio тобун түзөлү:

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

Ар бирине v-model директивасын жазып, аны 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>

Ошондой эле ар бирине өз 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>

Эми choice касиетинде ар дайым тандалган radioнун value мааниси болот:

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

Radio тобун колдонуп, колдонуучудан анын эне тили кайсыл экенин сураңыз. Тандалган тил абзацта чыкканына көз салыңыз.

Мурунку тапшырманы төмөнкүчө өзгөртөлү: бизде ар кайсы тилдеги үч абзац текст бар болсун. Колдонуучунун тандоосуна жараша, аны тандаган тилдеги сөз айкашын чыгарыңыз.