Флажки (Checkbox)

Флажки представляют элементы управления, которые могут находиться в двух состояниях: отмеченном и неотмеченном.

Одиночный флажок может быть привязан к логическому значению true или false:

<div id="app"> 
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">{{ checked }}</label>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			checked: true
        }
    });
</script>

По умолчанию для отмеченного состояния используется значение true, а для неотмеченного - false. Но вместо них можно определить свои собственные значения для обоих состояний и между этими значениями переключаться:

<div id="app">
	<input type="checkbox" v-model="light" v-bind:true-value="on" v-bind:false-value="off" />
	  <span v-if="light===on">Выключить</span>
	  <span v-else>Включить</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			on: true,
			off:false,
			light: true
        }
    });
</script>

Вместо значений true и false флажок привязывается к одному из свойств on или off. С помощью атрибута v-bind:true-value="on" отмеченное состояние будет сопоставляться со свойством on. Соответственно в неотмеченном состоянии флажок приобретает значение off. А само выбранное значение попадает в свойство light.

Привязка к массиву

Также группа флажков может быть привязана к одному массиву. В этом случае при отметке флажка его значение попадает в массив:

<div id="app">
	<input type="checkbox" value="Tom" v-model="selectedUsers">
	<label>C#</label><br>
	  <input type="checkbox" value="Bob" v-model="selectedUsers">
	  <label>Bob</label><br>
	  <input type="checkbox" value="Sam" v-model="selectedUsers">
	  <label>Sam</label><br>
	  <input type="checkbox" value="Alice" v-model="selectedUsers">
	  <label>Alice</label><br>
	  <span>Выбрано: {{selectedUsers}}</span>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			selectedUsers:[]
        }
    });
</script>

В данном случае 4 флажка привязаны к массиву selectedUsers. Отметив определенный флажок, мы добавим его значение в массив.

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

В примере выше значение каждого флажка представляло некоторую строку. Но также флажок может быть привязан к целому объекту. Для динамической привязки у элемента html применяется атрибут v-bind:value:

<div id="app" class="col-md-4">
	<template v-for="user in users">
		<input type="checkbox" v-bind:value="user" v-model="selectedUsers">
		<label>{{user.name}}</label><br>
    </template>
	
	<ul>
		<li v-for="user in selectedUsers">{{user.name}} - {{user.age}}</li>
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users:[
				{name:'Tom', age:22},
				{name:'Bob', age:25},
				{name:'Sam', age:28},
				{name:'Alice', age:26}
			],
			selectedUsers:[]
        }
    });
</script>

Здесь динамически для каждого объекта в массиве формируется флажок, а при выборе флажка объект попадет в массив selectedUsers.