رندر شرطی بخش مهمی از قالب در هر زبانی است. رویکرد Vue.js را کشف کنید.
Vue.js یک فریمورک محبوب جاوا اسکریپت است که ایجاد برنامه های وب پویا را آسان می کند. Vue.js می تواند محتوا را بر اساس داده ها و رویدادها ارائه دهد. این به ویژه برای ایجاد رابط های کاربری پاسخگو و تعاملی مفید است.
دستورالعمل های Vue چیست و چگونه از آنها برای دستیابی به رندر شرطی در Vue.js استفاده کنید.
دستورالعمل های Vue چیست؟
دستورالعمل های Vue به شما این امکان را می دهد که رفتار عناصر HTML را در قالب های Vue.js با افزودن ویژگی های منحصر به فرد به آنها بهبود بخشید.
دستورالعمل ها بخش اساسی Vue.js هستند و روشی ساده و قدرتمند برای دستکاری Document Object Model (DOM)، افزودن رفتار پویا به عناصر و مدیریت داده ها ارائه می دهند.
علاوه بر این، Vue.js به شما امکان می‌دهد دستورالعمل‌های سفارشی ایجاد کنید و به شما امکان می‌دهد به راحتی توابع قابل استفاده مجدد را برای برنامه‌های Vue ایجاد کنید.
چارچوب Vue دستورات خود را با “v-” قبل از نام دستورالعمل پیشوند می کند. نمونه هایی از دستورالعمل های رایج مورد استفاده در Vue عبارتند از v-on، v-bind، v-for و v-if.
رندر شرطی چیست؟
رندر شرطی به شما امکان می دهد عناصر را بر اساس شرایطی که مشخص کرده اید نمایش یا پنهان کنید. برای مثال، تنها در صورتی می‌توانید از رندر شرطی برای نمایش پیام به کاربران استفاده کنید که یک آدرس ایمیل معتبر وارد کرده باشند.
در Vue.js، می‌توانید از دستورالعمل‌هایی مانند v-if و v-show برای دستیابی به رندر شرطی در برنامه خود استفاده کنید، متفاوت از نحوه ارائه محتوا به صورت شرطی در React.js.
دستیابی به رندر شرطی با دستورالعمل v-if
مشابه دستور if…else جاوا اسکریپت، دستور v-if در Vue.js دارای یک شرط است. اگر برآورده نشد، Vue.js شرایط زیر را که در دستورالعمل v-else مشخص شده است، ارزیابی می‌کند و تا زمانی که یک شرط را برآورده کند یا همه شرایط را ارزیابی کند، این کار را ادامه می‌دهد.
این دستورالعمل به شما امکان می دهد یک عنصر را به صورت شرطی بر اساس یک مقدار بولی ارائه دهید. اگر مقدار آن نادرست باشد، کامپایلر Vue.js آن قسمت را نمایش نمی دهد.
در اینجا مثالی از رندر کردن محتوا به صورت شرطی با v-if آورده شده است:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='false' >{{ message1 }}</h1>
<h1 v-else >{{ message2 }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
message1: 'This is your Vue App.',
message2: 'Not Yet a Vue App.'
}
}
})
app.mount('#app')
</script>
</body>
</html>
بلوک کد بالا یک برنامه Vue را نشان می دهد که با افزودن پیوند شبکه تحویل محتوا (CDN) به بدنه فایل HTML شما ایجاد شده است. دستور v-if عنصر h1 را تنها در صورتی ارائه می دهد که شرط آن درست باشد.
در برنامه‌های Vue، موقعیت‌هایی وجود دارد که باید یک مؤلفه را بر اساس معیارهای پویا خاص رندر کنید. این در سناریوهایی مانند نمایش اطلاعات فقط زمانی مفید است که کاربر روی دکمه کلیک می‌کند یا نشانگر بارگیری را در حین بارگیری داده‌ها از یک API نشان می‌دهد.
مثلا:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'This is your Vue App.'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
</html>
بلوک کد بالا از دستور v-if برای ارائه مشروط محتوا بر اساس مقدار متغیر بولی، showUsers استفاده می کند.
اگر مقدار درست باشد عنصر div نمایش داده می‌شود و اگر نادرست باشد پنهان می‌شود. با کلیک بر روی دکمه Toggle Users، متد toggleShowUsers() برای تغییر مقدار showUsers فعال می شود.
این مثال همچنین از دستور v-on برای گوش دادن به رویدادها مانند رویداد کلیک روی دکمه استفاده می کند. هر زمان که مقدار showUsers تغییر کند، دستورالعمل v-if را دوباره ارزیابی می کند.
دستیابی به رندر شرطی با دستور v-show
دستور v-show راه دیگری برای نمایش یا پنهان کردن عناصر در Vue.js به صورت شرطی است. شبیه دستور v-if است که می تواند عناصر را بر اساس یک عبارت بولی ارائه کند. با این حال، تفاوت های اساسی بین این دو دستورالعمل وجود دارد.
دستورالعمل v-show عنصر را از DOM حذف نمی کند وقتی عبارت به false ارزیابی شود. در عوض، از CSS برای تغییر ویژگی نمایش عنصر بین none و مقدار اصلی آن استفاده می کند.
این بدان معناست که عنصر هنوز در DOM وجود دارد اما زمانی که عبارت نادرست باشد قابل مشاهده نیست.
در اینجا یک مثال است:
<body>
<div id="app">
<div v-if="showUsers">
<ul>
<li>User1</li>
<li>User2</li>
</ul>
</div>
<button v-on:click="toggleShowUsers()">
Toggle Users
</button>
<h1 v-show="showUsers">{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data () {
return {
showUsers: true,
message: 'These are the users of the Vue app'
}
},
methods: {
toggleShowUsers() {
this.showUsers = !this.showUsers
}
}
})
app.mount('#app')
</script>
</body>
بلوک کد بالا از دستور v-show برای نمایش پیامی مبنی بر “اینها کاربران برنامه Vue هستند” استفاده می کند هر زمان که روی دکمه جابجایی کلیک کنید.
انتخاب بین v-if و v-show
هنگام تصمیم گیری بین استفاده از دستورات v-if و v-show برای نمایش یا پنهان کردن عناصر در Vue.js به صورت مشروط، باید چند فاکتور مهم را در نظر گرفت.
وقتی شرایط به ندرت تغییر می کند، استفاده از دستورالعمل v-if خوب است. این به این دلیل است که وقتی شرط نادرست است، v-if عنصر را از DOM حذف می کند، که می تواند مانع از عملکرد بهینه شود. عنصر فقط زمانی ارائه می شود که شرط درست شود و زمانی که شرط دوباره false شود از DOM حذف می شود.
از طرف دیگر، اگر شرایط به طور مکرر تغییر می کند، بهتر است از دستور v-show استفاده کنید که عملکرد را بهبود می بخشد. این به این دلیل است که v-show از CSS برای پنهان کردن یا نمایش عنصر با جابجایی ویژگی نمایش CSS بین none و block استفاده می‌کند و عنصر را همیشه به DOM رندر می‌کند.
رندر مشروط در برنامه Vue شما آسان شده است
شما یاد گرفته اید که محتوا را به صورت مشروط در برنامه های Vue با دستورالعمل های v-if و v-show ارائه دهید. با استفاده از این دستورالعمل ها، می توانید به سرعت محتوا را بر اساس شرایط مختلف رندر کنید و کنترل بیشتری بر ظاهر و رفتار اجزای Vue خود داشته باشید.