Работа с чекбоксами в 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 сделайте следующее: если чекбокс
отмечен - абзац должен быть показан, а если
не отмечен - то скрыт.