Умовне відтворення/відображення у 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-якщо

Команда 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-шоу

Варто зазначити, що v-show також працюватиме у наведеному вище прикладі та функціонуватиме, здавалося б, однаково, але між ними є різниця.

v-if умовно відображає елемент, тоді як v-show умовно показує/показує елемент.

Це означає, що коли умовний оператор перемикається, v-if фактично видалить і відновить компоненти v-show просто робить їх невидимими або видимими. Наступна анімація ілюструє, як це зробити v-if фактично видаляє та відтворює блоки коду:

Між тим, v-show завжди підтримуватиме елемент у DOM і лише змінюватиме його CSS, щоб перемикати його вигляд (встановивши його display до none):

v-інакше

Команда v-else директива є a 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>

Давайте використаємо це, щоб перемикати вміст простої сторінки входу, щоб воно змінювало повідомлення залежно від того, увійшов користувач чи ні. Ми змінимо формулювання кнопки на основі 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 блокувати. Це схоже на JavaScript 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/