v-show (v-show)
اینجا «نمایش شرطی با v-show» را خیلی ساده یاد می گیری. «نمایش شرطی» یعنی عنصر گاهی دیده شود و گاهی مخفی شود. با v-show فقط دیدن را عوض می کنیم، خود عنصر حذف نمی شود.
تعریف و کاربرد v-show
v-show نمایش یک عنصر را بر اساس یک عبارت منطقی تغییر می دهد. اگر نتیجه false باشد، ویژگی CSS display برابر none می شود. عنصر فقط یک بار سوار می شود و در DOM باقی می ماند.
نمونه سریع: نمایش شرطی با v-show
با تغییر مقدار showDiv، متن دیده یا مخفی می شود.
<div v-show="showDiv">This div tag can be hidden</div>
مقایسه v-show و v-if
هر دو مخفی سازی می کنند؛ اما v-if عنصر را می سازد یا تخریب می کند. درحالی که v-show فقط display را عوض می کند و سریع تر تغییر می کند.
<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>
ترنزیشن با v-show
با کامپوننت <Transition> رویدادها و کلاس های حرکتی فعال می شوند. Lifecycle مثل mounted/unmounted هنگام تغییر دیدن، اجرا نمی شوند.
<template>
<h1>JavaScript Transition Hooks</h1>
<p>بعد از "after-enter"، یک div قرمز نمایش داده می شود.</p>
<button @click="pVisible = true">Create p-tag!</button><br>
<Transition @after-enter="onAfterEnter">
<p v-show="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-show="divVisible">Shown after enter-active phase.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
};
},
methods: {
onAfterEnter() {
this.divVisible = true;
}
}
};
<\/script>
<style scoped>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
نکات کلیدی از مستند
با v-pre کامپایل رد می شود. با v-if ساخت و تخریب انجام می شود. برای سرعت تغییر، از نمایش شرطی با v-show استفاده کن.
گام های عملی
- یک متغیر منطقی بساز و مقدار اولیه بده.
- روی عنصر، ویژگی
v-showبرابر آن متغیر بگذار. - برای انیمیشن، عنصر را داخل
<Transition>قرار بده.
جمع بندی سریع
v-showعنصر را حذف نمی کند.- فقط CSS
displayرا عوض می کند. - با
<Transition>انیمیشن دارد. - برای تغییرات پرتکرار، بهینه تر از
v-ifاست.