v-if (v-if)
دایرکتیو v-if برای «رندر شرطی (Conditional Rendering)» است. یعنی عنصر فقط وقتی ساخته می شود که شرط true باشد. مثل اعلام «موجود است» وقتی تعداد بیشتر از صفر است.
رندر شرطی با v-if / v-else-if / v-else
در Vue، شرط ها را مستقیم روی تگ می نویسی. بنابراین کد خواناتر می شود و سریع تر نتیجه می گیری.
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
شرط با مقایسه عددی
مقایسه مقدارها با عملگرها انجام می شود. اگر تعداد > 0 بود، «موجود است» را نشان بده.
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
زنجیره کامل شرط ها
می توانی چند حالت بسازی: زیاد، کم، یا ناموجود. از v-else-if بینشان استفاده کن.
<p v-if="typewriterCount > 3">
In stock
</p>
<p v-else-if="typewriterCount > 0">
Very few left!
</p>
<p v-else>
Not in stock
</p>
استفاده از عبارت جاوااسکریپت
می توانی داخل شرط از متدهای جاوااسکریپت استفاده کنی؛ مثلاً includes() برای جستجوی کلمه.
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
گسترش: ساخت تگ های دیگر همزمان
اگر شرط درست بود، می توانی چند تگ بسازی؛ مثل یک پیام و یک تصویر.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
};
}
});
app.mount('#app');
<\/script>
چند حالت متنی مختلف
برای چند کلمه، از v-else-if استفاده کن و نتیجه مناسب بساز.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
};
}
});
app.mount('#app');
<\/script>
نکته های مهم v-if
از عملگرهای مقایسه و منطقی استفاده کن. همچنین ترتیب v-if، سپس v-else-if، و در پایان v-else را رعایت کن.
<!-- الگوی کلی: -->
<div>
<!-- شرط اول -->
<p v-if="conditionA">A</p>
<!-- شرط دوم -->
<p v-else-if="conditionB">B</p>
<!-- در غیر این صورت -->
<p v-else>Else</p>
</div>
گام های عملی
- یک داده بولی یا عبارت مقایسه تعریف کن.
- روی تگ،
v-ifقرار بده. - در ادامه،
v-else-ifوv-elseبچین. - مقدار داده را عوض کن و خروجی را ببین.
جمع بندی سریع
v-ifعنصر را شرطی می سازد.v-else-ifبرای حالت های میانی است.v-elseآخرین گزینه پیش فرض است.- از عبارات جاوااسکریپت هم می شود استفاده کرد.