سلام دوستان. توی فریم‌ورک ویوو خیلی راحت می‌تونیم وضعیت نمایش یا رندر شدن یک المنت 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>