Checkboxes/Radios/Selects का उपयोग
Checkboxes, radio buttons, और dropdowns हर एक उस data type से bind होता है जो इनके लिए सबसे ज़्यादा fit करता है।
In this page:
Syntax
<input type="checkbox" v-model="checked">
<input type="radio" value="option" v-model="picked">
<select v-model="selected">
<option value="option">text</option>
</select>Checkboxes/Radios/Selects
एक single checkbox एक boolean से bind होता है, कई checkboxes एक array से bind होते हैं, एक radio group एक value से bind होता है, और एक select chosen option value (या multiple के साथ एक array) से bind होता है। Non-string values bind करने के लिए options और inputs पर :value इस्तेमाल करें।
Note:
सारी checked values collect करने के लिए कई checkboxes को एक array से bind करें।
उदाहरण: Checkboxes/radios/selects
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<label><input type="checkbox" v-model="agree"> Agree</label>
<label><input type="checkbox" value="js" v-model="langs"> JS</label>
<label><input type="checkbox" value="py" v-model="langs"> Python</label>
<label><input type="radio" value="S" v-model="size"> S</label>
<label><input type="radio" value="L" v-model="size"> L</label>
<select v-model="color"><option value="red">Red</option><option value="blue">Blue</option></select>
<p>{{ agree }} | {{ langs }} | {{ size }} | {{ color }}</p>
</div>
<script>
Vue.createApp({ data() { return { agree: false, langs: [], size: "S", color: "red" }; } }).mount("#app");
(async () => {
const boxes = document.querySelectorAll("input");
for (const i of [0, 1, 2, 4]) { boxes[i].click(); await Vue.nextTick(); }
const sel = document.querySelector("select"); sel.value = "blue"; sel.dispatchEvent(new window.Event("change"));
await Vue.nextTick();
console.log(document.querySelector("p").textContent);
})();
</script>
</body>
</html>
<!-- Output:
Rendered: Agree JS Python S LRedBluetrue | [ "js", "py" ] | L | blue
console: true | [
"js",
"py"
] | L | blue
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- जहाँ एक array चाहिए वहाँ एक boolean इस्तेमाल करना
- value attribute भूल जाना
- select के लिए एक initial value set न करना
चैप्टर सारांश
- एक checkbox एक boolean है
- कई checkboxes एक array देते हैं
- Radios एक value देते हैं
- select chosen value bind करता है
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: