v-if (v-if)
دایرکتیو «v-if» یعنی «نمایش شرطی عنصر». «دایرکتیو (Directive)» دستور قالب است. اگر شرط «true» باشد، عنصر ساخته می شود. اگر «false» باشد، عنصر حذف می شود. مثل اعلام حضور کلاس: فقط حاضری ها وارد می شوند.
تعریف و رفتار v-if
وقتی «v-if» روی یک تگ می آید، باید یک عبارت شرطی هم داشته باشد. اگر شرط درست شود، تگ و محتوایش وارد DOM می شوند. اگر غلط شود، تگ از DOM حذف می شود.
نکته: «v-if» را با «v-for» روی یک تگ نگذار. «v-if» اولویت بالاتری دارد و به متغیرهای «v-for» دسترسی ندارد.
مثال پایه: ساختن تگ وقتی شرط برقرار است
<template>
<div v-if="createImgDiv">
<img src="/img_apple.svg" alt="apple">
<p>This is an apple.</p>
</div>
</template>
<script>
export default {
data() {
return {
createImgDiv: true
};
}
};
<\/script>
زنجیره شرط ها با v-else-if و v-else
با سه وضعیت، پیام مناسب نشان بده. مثل نمره انشا: عالی، کم، یا هیچ.
<template>
<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>
</template>
<script>
export default {
data() {
return {
typewriterCount: 2
};
}
};
<\/script>
بررسی شرط با متدهای جاوااسکریپت
می توانی از متدها استفاده کنی. مانند جست وجوی «pizza» داخل متن.
<template>
<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>
</template>
<script>
export default {
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
};
}
};
<\/script>
نمایش پس از دریافت داده از API
دکمه را بزن. داده بیاید، کارت را نشان بده. مثل کارنامه آنلاین.
<template>
<h1>Example</h1>
<button @click="fetchData">Fetch data</button>
<div v-if="data" id="dataDiv">
<img :src="data.avatar" alt="avatar">
<pre>{{ data.first_name + ' ' + data.last_name }}</pre>
<p>"{{ data.employment.title }}"</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null
};
},
methods: {
async fetchData() {
const response = await fetch('https://random-data-api.com/api/v2/users');
this.data = await response.json();
}
}
};
<\/script>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
ترنزیشن ورود/خروج با Transition
با «<Transition>» ورود و خروج عنصر را انیمیت کن. مثل ظاهرشدن پیام.
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="exists = !exists">{{ btnText }}</button>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
};
},
computed: {
btnText() {
if (this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
};
<\/script>
<style scoped>
.v-enter-from {
opacity: 0;
translate: -100px 0;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
}
.v-leave-from {
opacity: 1;
translate: 0 0;
}
.v-leave-to {
opacity: 0;
translate: 100px 0;
}
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
transition: all 0.5s;
}
</style>
گام های عملی
- شرط را در data یا computed آماده کن.
- روی تگ هدف، «v-if» یا «v-else-if/else» بگذار.
- برای انیمیشن، عنصر را داخل «<Transition>» قرار بده.
ادامه کار شرطی را در v-else-if و v-else ببین. برای انیمیشن ها هم انیمیشن های Vue را بررسی کن. درباره چرخه حیات، Lifecycle Hooks را بخوان.
جمع بندی سریع
- «v-if» عنصر را واقعاً می سازد یا حذف می کند.
- با «v-else-if/else» همه حالت ها پوشش داده می شوند.
- با «Transition» ورود و خروج را انیمیت کن.
- «v-if» را با «v-for» روی یک تگ نگذار.