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 ? 'हाँ' : 'नहीं' }}</p>
</template>