Ву-дар чекбокс кор кардан
Биёед акнун бубинем, ки кор бо
чекбокс
чӣ гуна сурат мегирад.
Бигзор мо як
табдилдиҳандаи зеринро дошта бошем:
<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 ? 'ҳа' : 'не' }}</p>
</template>
Чекбокс дода шудааст. Абзац дода шудааст. Бо ёрии директиваи
v-if ин корро анҷом диҳед: агар чекбокс
нишона зада шавад - абзац бояд намоиш дода шавад, ва агар
нишона назада шавад - пас пинҳон шавад.