Работа с радиокнопками в Vue
Работа с радиокнопками происходит
аналогичным образом. Давайте посмотрим
на практике. Для начала сделаем свойство
choice, которое мы будем привязывать
к группе радиокнопок:
data() {
return {
choice: '',
}
}
Сделаем теперь группу радиокнопок:
<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 всегда будет
лежать value отмеченной радиокнопочки:
<template>
you choosed: {{ choice }}
</template>
Спросите у пользователя с помощью радиокнопочек, какой язык для него родной. Сделайте так, чтобы выбранный язык вывелся в абзаце под радиокнопками.
Модифицируйте предыдущую задачу следующим образом: пусть у нас есть три абзаца с текстом на разном языке. В зависимости от выбора пользователя выведите фразу на выбранном им языке.