Условный рендеринг/отображение в 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 атрибут будет только произведенный если выражение директивы возвращает true ценность. Если выражение дает недопустимый результат (например, null, 0, пустая строка, false), элемент удаленный из ДОМ.

Проиллюстрируем это поведение на практическом примере:

<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 директива 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.

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/