از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
رندر/نمایش شرطی در Vue با v-if، v-show، v-else و v-else-ifVue.js یک چارچوب برنامه وب ساده برای ایجاد رابط های وب پویا و برنامه های تک صفحه ای (SPA) است. همانطور که ما این برنامه ها را ایجاد می کنیم، اغلب، می خواهیم چیزی را بر اساس رندر کنیم روی یک معیار خاص – این جوهر رندر مشروط است. رندر شرطی به توانایی رندر متمایز اشاره دارد…
سرفصلهای مطلب
معرفی
Vue.js یک چارچوب برنامه وب ساده برای ایجاد رابط های وب پویا و برنامه های تک صفحه ای (SPA). همانطور که ما این برنامه ها را ایجاد می کنیم، اغلب اوقات، می خواهیم چیزی مبتنی بر ارائه روی یک معیار خاص – این جوهر رندر شرطی است.
رندر شرطی به توانایی ارائه رابط کاربری متمایز (UI) بر اساس نشانه گذاری اشاره دارد روی آیا یک شرط درست است یا خیر. این مفهوم اغلب در زمینه هایی مانند نمایش یا پنهان کردن اجزا (تغییر کردن)، تغییر عملکرد برنامه، مدیریت احراز هویت و مجوز، و بسیاری موارد دیگر استفاده می شود.
در این مقاله، روش‌های مختلف رندر شرطی در Vue.js با استفاده از عبارت را بررسی می‌کنیم
v-if،v-else-if، وv-elseبخشنامه ها ما همچنین به چند نمونه نگاه می کنیم و تفاوت بین آنها را برجسته می کنیمv-ifوv-show.
v-اگر
این v-if دستورالعمل استفاده می شود یک بلوک را به صورت مشروط ارائه کنید به معنی بلوک با v-if ویژگی فقط خواهد بود تولید شده اگر عبارت دستورالعمل a را برگرداند true ارزش. اگر عبارت یک نتیجه نامعتبر ایجاد کند (به عنوان مثال، null، 0رشته خالی falseعنصر است حذف شده از DOM
بیایید این رفتار را نشان دهیم روی مثال عملی:
<div v-if="login">
<p>This user has been logged in!... Welcome.</p>
</div>
<script>
export default {
data() {
return {
login: true,
};
}
};
</script>
از آنجا که login تنظیم شده است true، <div> بلوک حاوی v-if دستورالعمل تولید خواهد شد، بنابراین نمایش داده می شود.
v-اگر در مقابل v-show
شایان ذکر است که v-show در مثال بالا نیز کار می کند و به ظاهر یکسان عمل می کند، اما بین این دو تمایز وجود دارد.
v-ifمشروط ارائه می کند یک عنصر، در حالی کهv-showمشروط نشان می دهد/نمایش می دهد یک عنصر
این به این معنی است که وقتی شرطی تغییر می کند، v-if در واقع اجزای wile را حذف و بازیابی می کند v-show فقط آنها را نامرئی یا قابل مشاهده می کند. انیمیشن زیر روش کار را نشان می دهد v-if در واقع بلوک های کد را حذف و بازتولید می کند:
در همین حال، v-show همیشه عنصر را در DOM حفظ می کند و فقط CSS آن را تغییر می دهد تا ظاهر آن را تغییر دهد (با تنظیم آن display به none):
v-دیگر
این v-else بخشنامه الف است v-if دستورالعملی که به شما امکان می دهد تا سفارشی کنید false ارزش در رندرهای شرطی اگر اینطور نیست true، شما می توانید استفاده کنید v-else برای تعریف آنچه که باید در عوض اتفاق بیفتد.
به عنوان مثال، فرض کنید که ما یک ورودی رمز عبور داریم و می‌خواهیم یک پیام خطا ایجاد کند. “رمز ضعیف”، اگر طول ورودی کمتر از 6 یا نمایشگر باشد “رمز عبور قوی” اگر طول بیشتر از 6 باشد.
این یک رندر شرطی است، با گزینه ای برای رسیدگی به حروف نادرست:
<form>
<input type="password" v-model="password" placeholder="Enter your password" />
<p v-if="password.length > 6">Strong Password</p>
<p v-else>Weak Password</p>
</form>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
توجه داشته باشید: v-if/v-else مانند معمولی کار می کند if و if...else بیان در جاوا اسکریپت
بیایید از این برای تغییر محتوای یک ورود ساده استفاده کنیم page بنابراین پیام را بر اساس تغییر می دهد روی آیا کاربر وارد شده است یا خیر. ما عبارت دکمه را بر اساس اصلاح خواهیم کرد روی را userLoggedIn وضعیت نیز:
<div id="app">
<div v-if="userLoggedIn">
<h2>Hello Welcome!</h2>
<p>You have sucessfully logged in to your user account!</p>
</div>
<div v-else>
<p>Please Log In to access your account!</p>
</div>
<button @click="userLoggedIn = !userLoggedIn">
<p v-if="!userLoggedIn">Login</p>
<p v-else>LogOut</p>
</button>
</div>
<script>
export default {
data() {
return {
userLoggedIn: false
};
}
};
</script>
رویداد کلیک دکمه، آن را تغییر می دهد userLoggedIn آیتم داده، و این بر داده های نمایش داده شده مانند زیر تأثیر می گذارد:
v-دیگر-اگر
v-else-if extends a v-if با یک else...if مسدود کردن. این شبیه به جاوا اسکریپت است else...if بلوک به این صورت که به ما امکان می دهد یک دستور if را به یک موجود اضافه کنیم v-if. این زمانی استفاده می‌شود که معیارهای زیادی برای بررسی وجود داشته باشد و می‌توان آن را چندین بار زنجیره کرد:
<form>
<input type="password" v-model="password" placeholder="Enter your password" />
<p v-if="password.length < 4">Weak Password</p>
<p v-else-if="password.length < 7">Fairly Strong Password</p>
<p v-else>Strong Password</p>
</form>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
توجه داشته باشید: وقتی هر دو v-if و v-for به همان عنصر استفاده می شوند، v-if ابتدا ارزیابی می شود. این به سادگی نشان می دهد که استفاده از v-if و v-for روی همان عنصر به دلیل تقدم ضمنی توصیه نمی شود.
نتیجه
در این مقاله روش رندر شرطی یک عنصر را با آن مشاهده کردیم v-if، v-else، و v-else-if. ما همچنین تفاوت بین آنها را توضیح دادیم v-if و v-show.
منتشر شده در 1403-01-10 22:55:05
