Arbete med checkbox i Vue

Låt oss nu titta på hur arbetet med checkbox går till. Låt oss säga att vi har följande växlingsknapp:

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

Låt oss skapa en egenskap checked, som kommer att styra funktionen för denna checkbox:

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

Låt oss binda denna egenskap via v-model:

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

Om checkbox är markerad - kommer egenskapen checked att ha värdet true, och om den är omarkerad - då false. För att förvissa sig om detta kan du skriva ut värdet av egenskapen på skärmen, så här:

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

Med hjälp av den ternära operatorn kan man skriva ut något mer meningsfullt:

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