# Работа с радиокнопками в 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>`

Спросите у пользователя с помощью радиокнопочек, какой язык для него родной. Сделайте так, чтобы выбранный язык вывелся в абзаце под радиокнопками.

Модифицируйте предыдущую задачу следующим образом: пусть у нас есть три абзаца с текстом на разном языке. В зависимости от выбора пользователя выведите фразу на выбранном им языке.

←→
↑