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:

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

Erstellen wir nun eine Gruppe von Radio-Buttons:

App.vue<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:

App.vue<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:

App.vue<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:

App.vue<template>
  you choosed: {{ choice }}
</template>