# Работа с чекбоксами в Vue

Давайте теперь посмотрим, как происходит работа с чекбоксами. Пусть у нас есть следующий чекбокс:

`<template> <input type="checkbox"> </template>`

Сделаем свойство `checked`, которое будет управлять работой этого чекбокса:

`data() { return { checked: true, } }`

Привяжем это свойство через `v-model`:

`<template> <input type="checkbox" v-model="checked"> </template>`

Если чекбокс отмечен - свойство `checked` будет иметь значение `true`, а если не отмечен - то `false`. Чтобы убедится в этом, можно вывести значение свойства на экран, вот так:

`<template> <input type="checkbox" v-model="checked"> <p>{{ checked }}</p> </template>`

С помощью тернарного оператора можно выводить что-нибудь более осмысленное:

`<template> <input type="checkbox" v-model="checked"> <p>{{ checked ? 'yes' : 'no' }}</p> </template>`

Дан чекбокс. Дан абзац. С помощью директивы `v-if` сделайте следующее: если чекбокс отмечен - абзац должен быть показан, а если не отмечен - то скрыт.

← →
↑