ویوو جی‌اس از راه بهتر - همه چیز درباره v-if و v-show

سلام دوستان. توی فریم‌ورک ویوو خیلی راحت می‌تونیم وضعیت نمایش یا رندر شدن یک المنت View کنترل کنیم. برای این کار از دو دستور می‌تونیم استفاده کنیم: v-if و v-show. این دو دستور شباهت‌ها و تفاوت‌هایی دارن که امروز اونها رو بررسی می‌کنیم. 

قبل از شروع، اگه با عبارت‌های truthy و falsy آشنایی ندارین، اینجا (عبارت‌های truthy و falsy) رو ببینید.  

دستور v-if

استفاده از این دستور به صورت زیر هست: 

<p v-if="condition">Um</p>

condition داخل v-if اگه یک عبارت truthy باشه، المنت p رو توی صفحه خواهیم دید. در غیر این صورت این المنت توسط فریم‌ورک رندر نمیشه. condition می‌تونه یک پراپرتی توی data باشه یا یک پراپرتی computed. یا صراحتا یک عبارت شرطی جاوااسکریپتی. مثال‌های زیر رو ببینید:

<div id="app">
  <p v-if="name == 'Jeff'">Welcome Jeff</p>
  <p v-if="isAdmin">Welcome Admin</p>
  <p v-if="[1, 2, 3].length > 0">Hmm</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data:{
    name: 'Jeff'
  },
  computed: {
    isAdmin() {
      return true;
    }
  }
});
</script>

توی مثال بالا، همه‌ی عبارت‌های داخل v-if ها truthy هستن که باعث میشه المنت‌ها رندر بشن. اگه Inspector مرورگر رو ببینیم:  

حالا اگه یک عبارت truthy نباشه، توی صفحه رندر نمیشه. مثل آیتم اول و سوم کد زیر: 

<div id="app">
  <p v-if="name != 'Jeff'">Welcome !Jeff</p>
  <p v-if="isAdmin">Welcome Admin</p>
  <p v-if="false">Hmm</p>
</div>

خروجی توی Inspector به صورت زیر هست:

همونطور که می‌بینیم هیچ اثری از المنت‌های اول و سوم نیست.  

else/ else if

همه جا و توی هر زبانی، کنار هر if، یک else if و else هم هست. اونها رو توی ویوو هم داریم:

<p v-if="score > 15">Good</p>
<p v-else-if="score <= 15 && score > 10">Not bad</p>
<p v-else>Horrible</p>

همونطور که توی همه‌ی زبان‌های برنامه‌نویسی، if و else if و else دقیقا باید پشت سر هم نوشته بشن، توی ویوو هم المنتی که از v-else-if استفاده می‌کنه باید دقیقا بعد از المنتی نوشته بشه که داره از v-if استفاده می‌کنه. همچنین المنتی که از v-else استفاده می‌کنه دقیقا بعد از المنتی بیاد که داره از v-if یا v-else-if استفاده می‌کنه. پس نباید هیچ المنت دیگه‌ای بین اینها قرار بگیره.

کد زیر رو در نظر بگیرید که v-if روی المنتی اعمال شده که خودش شامل چند المنت زیر مجموعه میشه. 

<div v-if="condition">
  <p>View</p>
  <p>Go</p>
  <p>Run</p>
</div>

المنت div به همراه زیر مجموعه‌های اون زمانی رندر میشن که condition برقرار بشه. حالا شرایط زیر رو در نظر بگیرید:

<ul>
  <li>1</li>
  <div v-if="true">
    <li>2</li>
    <li>3</li>
  </div>
  <li>4</li>
</ul>

اگه شرط خط ۳ برقرار باشه، توی خروجی لابه‌لای li ها یک div هم می‌بینیم! که نباید اینطوری باشه و استاندارد نیست. برای حل این مسئله، بجای div از template استفاده می‌کنیم:

<ul>
  <li>1</li>
  <template v-if="true">
    <li>2</li>
    <li>3</li>
  </template>
  <li>4</li>
</ul>

وقتی از template استفاده می‌کنیم، این المنت رو توی خروجی نمی‌بینیم و با برقرار شدن شرط فقط محتویات اون رندر میشن. پس خروجی کد بالا به صورت زیر هست:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

دستور v-show

کارایی این دستور شباهت زیادی به v-if داره و نحوه‌ی استفاده اون بصورت زیر هست: 

<p v-show="condition">Hmm</p>

المنت p زمانی نشون داده میشه که condition یک عبارت truthy باشه. پس چه تفاوتی داره با v-if؟ 🤔  اگه condition برقرار نشه این المنت رو توی صفحه نمی‌بینیم. خروجی توی Inspector مرورگر بصورت زیر هست:

همونطور که می‌بینیم المنت p رندر شده اما فریم‌ورک با یک استایل css اون رو فقط مخفی کرده.

از کدوم استفاده کنیم؟ v-if یا v-show؟

v-if یک شرط واقعی هست که اگه روی یک المنت اعمال بشه، خودش و محتویات اون تا زمانی که شرط برقرار نباشه رندر نمیشن. اما توی v-show، المنت و محتویات اون رندر میشن ولی مخفی هستن.

بنابراین اگه می‌خوایم محتویات داخلی یک المنت فقط زمانی رندر بشه که یک شرط برقرار باشه، از v-if استفاده می‌کنیم:

<div v-if="user">
  <p>Welcome {{ user.info.name }}</p>
</div>

توی کد بالا اگه بجای v-if از v-show استفاده کنیم و اگه مقدار user نال باشه، چون خط دوم هم رندر شده خطا می‌گیریم و برنامه متوقف میشه. چون می‌خوایم به اعضای یک مقدار null دسترسی داشته باشیم. پس توی چنین شرایطی باید از v-if استفاده کنیم تا از رندر شدن ناخواسته جلوگیری کنیم.

v-show درواقع یک سوییچ‌کننده display هست. اگه می‌خوایم فقط وضعیت نمایش یک المنت توی صفحه رو تغییر بدیم از v-show استفاده می‌کنیم.

v-if به همراه v-for

اگه روی یک المنت هم v-if و v-for وجود داشته باشه، دستور v-for ارجحیت داره و زودتر اجرا میشه. دستور v-if باید روی المنت والد قرار گرفته باشه تا زودتر اجرا بشه:

<div v-if="true">
   <p v-for="..."></p>
</div>

با v-for توی قسمت بعدی آشنا می‌شیم 😉

پایان! منتظر قسمت‌های بعدی باشین. روزتون خوش ✌️