v-show (v-show)
دایرکتیو v-show برای «نمایش شرطی (Conditional Visibility)» است. یعنی عنصر ساخته می شود، اما بر اساس شرط فقط پنهان یا نمایان می شود. این کار با display:none انجام می شود.
نمایش شرطی با v-show
شرط را مستقیم در ویژگی تگ می نویسی. اگر مقدار true باشد، عنصر دیده می شود؛ وگرنه پنهان می شود.
<div v-show="showDiv">This div tag can be hidden</div>
نمونه ساده v-show
در این نمونه، وقتی showDiv برابر true باشد، متن دیده می شود. در غیر این صورت پنهان می شود.
<div id="app">
<div v-show="showDiv">This div tag can be hidden</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
};
}
});
app.mount('#app');
<\/script>
مقایسه v-show و v-if
v-if عنصر را می سازد یا حذف می کند. اما v-show فقط نمایش را عوض می کند. برای سوییچ سریع، v-show بهتر است.
<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
};
}
});
app.mount('#app');
<\/script>
گام های عملی
- یک داده بولی (Boolean) تعریف کن.
v-showرا روی تگ هدف بگذار.- مقدار داده را عوض کن و نتیجه را ببین.
- برای سوییچ سریع، از
v-showاستفاده کن.
جمع بندی سریع
v-showعنصر را پنهان یا نمایان می کند.- عنصر حذف نمی شود؛ فقط
displayعوض می شود. - برای سوییچ مداوم عالی است.
- برای چند حالت، سراغ
v-ifبرو.
برای جزئیات بیشتر v-if را ببین. همچنین ادامه v-for را دنبال کن. لینک مستقیم به این صفحه: v-show.