رندرینگ شرطی  (Conditional Rendering)

اصول آموزش vuejs

تاریخ : جمعه 12 مهر 1398

دایرکتیو v-if

دایرکتیو v-if برای رندر مشروط یک بلوک به کار می رود. این بلوک تنها در صورتیکه عبارت دایرکتیو یک مقدار true برگرداند رندر می شود.

<h1 v-if="awesome">Vue is awesome!</h1>

همچنین می توان "بلوک else" را با v-else اضافه کرد:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>


گروههای شرطی با v-if در <template>

از آنجا که v-if یک دایرکتیو است ، باید به یک عنصر پیوست شود. اما اگر بخواهیم بیش از یک عنصر را تغییر دهیم چه می شود؟ در این حالت می توانیم از v-if در یک عنصر <template> که بقیه عناصر را در بر می گیرد ، استفاده کنیم. نتیجه ارائه شده نهایی عنصر <template> را شامل نمی شود.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>


دایرکتیو v-else

می توانید از دایرکتیو v-else برای نشان دادن "بلاک else" برای دایرکتیو v-if استفاده نمایید:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>


دایرکتیو v-else-if

v-other-if ، همانطور که از نام آن پیداست ، جهت بلاک "else if" برای دایرکتیو v-if استفاده می شود.این دایرکتیو همچنین بصورت زنجیره ای می تواند بکار رود:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>


کنترل عناصر قابل استفاده مجدد با key

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

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

سپس با تعویض loginType در کد بالا خواهیم دید آنچه را که کاربر قبلاً وارد کرده پاک نخواهد کرد. از آنجا که هر دو قالب از عناصر یکسان استفاده می کنند ، <input> جایگزین نمی شود – و فقط placeholder تغییر می کند.

این ویژگی همیشه مطلوب نیست ، بنابراین Vue راهی را برای شما فراهم می کند تا بگویید ، "این دو عنصر کاملاً جدا از هم هستند - از آنها استفاده مجدد نکنید." و یک ویژگی key با مقادیر منحصر به فرد اضافه نمایید:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

حالا هر بار که وارد شوید ، این ورودی ها از ابتدا ارائه می شوند. مشاهده کنید:

توجه داشته باشید که عناصر <label> هنوز به طور مؤثر دوباره مورد استفاده قرار می گیرند ، زیرا آنها ویژگی key ندارند.


دایرکتیو v-show

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

<h1 v-show="ok">Hello!</h1>

تفاوت این است که عنصری که با v-show رندر می شود همیشه در DOM باقی می ماند. v-show فقط صفت display مربوط به CSS عنصر را ضمیمه می کند.

توجه داشته باشید که v-show از عنصر <template> پشتیبانی نمی کند ، و همچنین با v-else کار نمی کند.


مقایسه v-if با v-show

v-ifیک رندر شرطی "واقعی" است زیرا تضمین می کند که شنوندگان رویدادها و کامپوننت های فرزند در داخل بلوک شرطی به درستی از بین می روند و در تغییر وضعیت مجدداً ایجاد شوند.

v-if همچنین کند است: اگر شرط ارائه اولیه نادرست باشد ، رندری انجام نمی شود - بلوک شرطی رندر نخواهد شد تا زمانی که این شرط برای اولین بار صحیح شود.

در مقایسه ، v-show بسیار ساده تر است - این عنصر همیشه بدون در نظر گرفتن شرایط اولیه ، با ایجاد تغییر در CSS پایه رندر می شود.

به طور کلی ، v-if هزینه تغییر وضعیت بالاتری دارد در حالی که v-show دارای هزینه های رندر اولیه بالاتری است. بنابراین ، اگر لازم است عنصری را اغلب تغییر وضعیت دهید ، v-show را ترجیح می دهیم و در صورت عدم احتمال تغییر در زمان اجرا ، v-if را ترجیح می دهیم.


استفاده v-if به همراه v-for

استفاده v-if و v-for با هم توصیه نمی شود. برای اطلاعات بیشتر به style guide مراجعه کنید.

درصورت استفاده همزمان، v-for دارای اواویت بالاتری نسبت به v-if است. برای اطلاعات بیشتر به list rendering guide مراجعه کنید.


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/conditional.html


نظرات