Собственные значения для состояния чекбокса

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

<input
  type="checkbox"
  v-model="toggle"
  true-value="да"
  false-value="нет"
>

• если чекбокс выбран: vm.toggle === 'да'

• если чекбокс сброшен: vm.toggle === 'нет'

Так же можно связывать чекбоксы через v-model :

<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>
    const 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.

Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.