Vue හි checkbox සමග වැඩකිරීම

දැන් අපි බලමු, checkbox සමග වැඩකිරීම සිදුවන්නේ කෙසේද කියා. අප සතුව පහත දැක්වෙන මාරු කිරීමේ සුවිශේෂිය ඇතැයි සිතමු:

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

checked යන ගුණාංගය සාදමු, එය මෙම checkbox හි ක්‍රියාකාරිත්වය පාලනය කරනු ඇත:

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

මෙම ගුණාංගය v-model හරහා බැඳමු:

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

checkbox සලකුණු කර තිබේ නම් - checked ගුණාංගයේ තිබෙනු ඇති අගය true වන අතර, සලකුණු කර නැති නම් - false වේ. මෙය සහතික කර ගැනීම සඳහා, ගුණාංගයේ අගය තිරය මත ප්‍රදර්ශනය කළ හැකිය, මේ ආකාරයට:

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

ත්‍රිපද ක්‍රියාකරුවා භාවිතයෙන් වඩාත් තේරුම් ගත හැකි දෙයක් ප්‍රදර්ශනය කළ හැකිය:

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