v-show का उपयोग
v-show एक element को page में रखता है और बस इसका CSS display on और off switch करता है।
In this page:
Syntax
<p v-show="condition">toggled with CSS display</p>v-show
v-show display property toggle करता है, इसलिए element हमेशा DOM में exist करता है। Frequent toggling के लिए यह v-if से cheaper है लेकिन इसकी higher initial cost है क्योंकि सब कुछ पहले से render होता है। यह template पर काम नहीं करता और इसका कोई else counterpart नहीं है।
Note:
अक्सर toggle होने वाली चीज़ों के लिए v-show इस्तेमाल करें, जैसे dropdowns और tabs।
उदाहरण: v-show
<!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">
<button @click="open = !open">Toggle</button>
<p v-show="open">Now you see me</p>
</div>
<script>
Vue.createApp({ data() { return { open: false }; } }).mount("#app");
const p = document.querySelector("p");
console.log("initially display:", p.style.display);
document.querySelector("button").click();
Vue.nextTick(() => console.log("after click display:", JSON.stringify(p.style.display)));
</script>
</body>
</html>
<!-- Output:
Rendered: ToggleNow you see me
console: initially display: none
console: after click display: ""
-->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. #}
आम गलतियां
- template elements पर v-show इस्तेमाल करना
- यह उम्मीद करना कि v-show rendering skip करेगा
- v-else के साथ combine करना
चैप्टर सारांश
- v-show CSS display toggle करता है
- Element हमेशा exist करता है
- Frequent toggles के लिए cheap है
- template पर इस्तेमाल योग्य नहीं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: