Arbeiten mit Radio-Buttons in Vue

Die Arbeit mit Radio-Buttons erfolgt auf ähnliche Weise. Lassen Sie es uns in der Praxis betrachten. Lassen Sie uns zunächst eine Eigenschaft choice erstellen, die wir an eine Gruppe von Radio-Buttons binden werden:

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

Erstellen wir nun eine Gruppe von Radio-Buttons:

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

Weisen wir jedem von ihnen die Direktive v-model zu und binden sie an die Eigenschaft 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>

Geben wir jedem auch seinen eigenen 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>

Jetzt wird in der Eigenschaft choice immer der value des ausgewählten Radio-Buttons liegen:

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

Fragen Sie den Benutzer mit einer Gruppe von Radio-Buttons, welche Sprache seine Muttersprache ist. Sorgen Sie dafür, dass die gewählte Sprache in einem Absatz ausgegeben wird.

Modifizieren Sie die vorherige Aufgabe wie folgt: Lassen Sie uns drei Absätze mit Text in verschiedenen Sprachen haben. Geben Sie je nach Wahl des Benutzers den Satz in der von ihm gewählten Sprache aus.