Переключатели (radiobutton)

Последнее обновление: 02.11.2020

Переключатели (radiobutton или радиокнопки) позволяют определить группу альтернативных вариантов, из которых можно выбрать только один. При установке привязки, также как и для элементов <input type="checkbox">, директива v-model использует его атрибут checked и событие change для отслеживания изменения значения, а начальное значение атрибута checked.

Переключатели привязываются к одному свойству. При выборе переключателя связанное свойство получает выбранное значение:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<input type="radio" value="Tom" v-model="user">
    <label>Tom</label>
    <br>
    <input type="radio" value="Bob" v-model="user">
    <label>Bob</label>
    <br>
    <input type="radio" value="Sam" v-model="user">
    <label>Sam</label>
    <br>
    <span>Выбрано: {{ user }}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		user:''
	}
  }
}).mount('#app');
</script>
</body>
</html>
Привязка к переключателям radioButtons в Vue 3

Привязка к объекту

Также каждый из переключателей может быть привязан к сложному объекту. В этом случае используется атрибут v-bind:value. Результатом выбора соответственно также будет сложный объект:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="radio" v-bind:value="{name:'Tom', age:22}" v-model="user">
    <label>Tom</label>
    <br>
    <input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user">
    <label>Bob</label>
    <br>
    <input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user">
    <label>Sam</label>
    <br>
    <span>Выбрано: {{user.name}} - {{user.age}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		user:{}
	}
  }
}).mount('#app');
</script>
</body>
</html>
RadioButton и сложные объекты во Vue 3

Привязка к массиву объектов

В случае выше было бы более оптимально хранить данные в массиве и динамически создавать по элементам массива группу радиокнопок:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <template v-for="user in users">
        <input type="radio" v-bind:value="user" v-model="selectedUser">
        <label>{{user.name}}</label><br>
    </template>
    <span v-if="selectedUser!==null">Выбрано: {{selectedUser.name}} - {{selectedUser.age}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users:[
                {name:'Tom', age:22},
                {name:'Bob', age:25},
                {name:'Sam', age:28}
            ],
		selectedUser:null
	}
  }
}).mount('#app');
</script>
</body>
</html>

Результат работы будет тот же самый, что и в предыдущем примере.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850