رندر/نمایش شرطی در Vue با v-if، v-show، v-else و v-else-if

معرفی

Vue.js یک چارچوب برنامه وب ساده برای ایجاد رابط های وب پویا و برنامه های تک صفحه ای (SPA). همانطور که ما این برنامه ها را ایجاد می کنیم، اغلب اوقات، می خواهیم چیزی را بر اساس یک معیار خاص ارائه دهید - این ماهیت رندر شرطی است.

رندر شرطی به توانایی ارائه نشانه گذاری رابط کاربری متمایز (UI) بر اساس درستی یا نبودن یک شرط اشاره دارد. این مفهوم اغلب در زمینه هایی مانند نمایش یا پنهان کردن اجزا (تغییر کردن)، تغییر عملکرد برنامه، مدیریت احراز هویت و مجوز، و بسیاری موارد دیگر استفاده می شود.

در این مقاله، روش‌های مختلف رندر شرطی در Vue.js با استفاده از عبارت را بررسی می‌کنیم v-if, v-else-ifو v-else بخشنامه ها ما همچنین به چند نمونه نگاه می کنیم و تفاوت بین آنها را برجسته می کنیم v-if و v-show.

v-اگر

La 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-اگر vs v-show

شایان ذکر است که v-show در مثال بالا نیز کار می کند و به ظاهر یکسان عمل می کند، اما بین این دو تمایز وجود دارد.

v-if مشروط ارائه می کند یک عنصر، در حالی که v-show مشروط نشان می دهد/نمایش می دهد یک عنصر

این به این معنی است که وقتی شرطی تغییر می کند، v-if در واقع اجزای wile را حذف و بازیابی می کند v-show فقط آنها را نامرئی یا قابل مشاهده می کند. انیمیشن زیر نحوه کار را نشان می دهد v-if در واقع بلوک های کد را حذف و بازتولید می کند:

در همین حال، v-show همیشه عنصر را در DOM حفظ می کند و فقط CSS آن را تغییر می دهد تا ظاهر آن را تغییر دهد (با تنظیم آن display به none):

v-دیگر

La v-else بخشنامه الف است v-if دستورالعملی که به شما امکان می دهد تا سفارشی کنید false ارزش در رندرهای شرطی اگر اینطور نیست true, you can use,en 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>

بیایید از این برای تغییر محتویات یک صفحه ورود ساده استفاده کنیم تا پیام را بر اساس اینکه کاربر وارد شده است یا نه تغییر دهد. ما عبارت دکمه را بر اساس تغییر می دهیم 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-elseو v-else-if. ما همچنین تفاوت بین آنها را توضیح دادیم v-if و v-show.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/