Lucrul cu checkbox în Vue

Să analizăm acum cum se realizează lucrul cu checkbox. Să presupunem că avem următorul comutator:

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

Să creăm proprietatea checked, care va gestiona funcționarea acestui checkbox:

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

Să legăm această proprietate prin v-model:

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

Dacă checkbox este bifat - proprietatea checked va avea valoarea true, iar dacă nu este bifat - atunci false. Pentru a ne convinge de acest lucru, putem afișa valoarea proprietății pe ecran, astfel:

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

Cu ajutorul operatorului ternar se poate afișa ceva mai semnificativ:

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