Флажки (Checkbox)

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

Флажок или checkbox представляет элемент управления, который может находиться в двух состояниях: отмеченном и неотмеченном. При установке привязки директива v-model использует его атрибут checked и событие change для отслеживания изменения значения. При этом начальное значение атрибута checked.

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"> 
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		checked: true
	}
  }
}).mount('#app');
</script>
</body>
</html>
Checkbox binding in Vue 3

По умолчанию для отмеченного состояния используется значение 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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		on: true,
		off:false,
		light: true
	}
  }
}).mount('#app');
</script>

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

Привязка к флажкам checkbox с помощью директивы v-model в Vue 3

Во Vue 3 мы можем сократить эту конструкцию следующим образом:

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

Здесь элемент input применяет два атрибута, поставляемые Vue: true-value и false-value. Эти атрибуты имеют значения соответственно "on" и "off". Однако теперь для этих значений не определены свойства в приложении Vue, и теперь сами эти значения трактуются как строки. И свойство lignt в качестве значения может принимать одно из этих значений: "on" или "off". Соответственно с помощью операции сравнения мы можем узнать, чему равно свойство light: light==='on'.

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="checkbox" value="Tom" v-model="selectedUsers">
     <label>Tom</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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		selectedUsers:[]
	}
  }
}).mount('#app');
</script>
</body>
</html>

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

Checkbox и привязка к массиву в Vue 3

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

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

<!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="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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users:[
                {name:'Tom', age:22},
                {name:'Bob', age:25},
                {name:'Sam', age:28},
                {name:'Alice', age:26}
            ],
		selectedUsers:[]
	}
  }
}).mount('#app');
</script>
</body>
</html>

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

Привязка сложных объектов к input checkbox в Vue 3

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

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