Vue'da Checkbox ile Çalışma

Şimdi checkbox ile çalışmanın nasıl olduğuna bakalım. Şu anahtara sahip olduğumuzu varsayalım:

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

Bu checkbox'ın çalışmasını kontrol edecek checked özelliğini yapalım:

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

Bu özelliği v-model aracılığıyla bağlayalım:

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

checkbox işaretliyse - checked özelliği true değerine sahip olacak, eğer işaretli değilse - false olacak. Bundan emin olmak için, özelliğin değerini ekranda şu şekilde gösterebilirsiniz:

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

Üçlü operatör kullanılarak daha anlamlı bir şey çıktılanabilir:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'evet' : 'hayır' }}</p>
</template>