Vue-da checkbox ilə iş

Gəlin indi baxaq, necə baş verir checkbox ilə iş. Tutaq ki, bizdə var aşağıdakı keçid:

App.vue<template>
  <input type="checkbox">
</template>

Gəlin checked xassəsini edək, bu da idarə edəcək işini bu checkbox:

javascriptdata() {
  return {
    checked: true,
  }
}

Gəlin bu xassəni v-model ilə bağlayaq:

App.vue<template>
  <input type="checkbox" v-model="checked">
</template>

Əgər checkbox işarələnibsə - checked xassəsi true dəyərinə sahib olacaq, əgər işarələnməyibsə - onda false. Buna əmin olmaq üçün ekranda xassənin dəyərini göstərə bilərsiniz, belə:

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

Üçlü operator köməyi ilə daha mənalı bir şey göstərmək olar:

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