Renderowanie warunkowe jest kluczową częścią tworzenia szablonów w dowolnym języku. Odkryj podejście Vue.js.

Vue.js to popularny framework JavaScript, który ułatwia tworzenie dynamicznych aplikacji internetowych. Vue.js może renderować treści na podstawie danych i zdarzeń. Jest to szczególnie przydatne do tworzenia responsywnych i interaktywnych interfejsów użytkownika.

Dowiedz się, czym są dyrektywy Vue i jak ich używać do renderowania warunkowego w Vue.js.

Czym są dyrektywy Vue?

Dyrektywy Vue pozwalają ulepszyć zachowanie elementów HTML w szablonach Vue.js poprzez dodanie do nich unikalnych atrybutów.

Dyrektywy są fundamentalną częścią Vue.js i zapewniają prosty i skuteczny sposób manipulowania plikami Obiektowy model dokumentu (DOM), dodawać dynamiczne zachowanie do elementów i zarządzać danymi.

Dodatkowo Vue.js umożliwia tworzenie niestandardowych dyrektyw, umożliwiając łatwe tworzenie funkcji wielokrotnego użytku dla aplikacji Vue.

Framework Vue poprzedza swoje dyrektywy przedrostkiem "v-"

instagram viewer
przed nazwą dyrektywy. Przykłady często używanych dyrektyw w Vue obejmują v-on, v-bind, v-za, I v-jeśli.

Co to jest renderowanie warunkowe?

Renderowanie warunkowe umożliwia wyświetlanie lub ukrywanie elementów na podstawie określonych warunków. Na przykład możesz użyć renderowania warunkowego, aby wyświetlić wiadomość użytkownikom tylko wtedy, gdy wprowadzili prawidłowy adres e-mail.

W Vue.js możesz używać dyrektyw takich jak v-jeśli I v-pokaz aby uzyskać renderowanie warunkowe w aplikacji, inne niż chcesz renderuj treść warunkowo w React.js.

Osiągnięcie renderowania warunkowego za pomocą dyrektywy v-if

Podobny do JavaScript Jeśli inaczej oświadczenie, v-jeśli dyrektywa w Vue.js zawiera warunek. Jeśli nie jest spełniony, Vue.js ocenia następujący warunek określony w a v-inaczej dyrektywę i kontynuuje to, dopóki nie spełni warunku lub nie oceni wszystkich warunków.

Ta dyrektywa umożliwia warunkowe renderowanie elementu na podstawie wartości logicznej. Kompilator Vue.js nie zrenderuje części, jeśli jej wartość jest fałszywa.

Oto przykład warunkowego renderowania zawartości za pomocą v-jeśli:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Dokumenttytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<h1v-jeśli='FAŁSZ' >{{ wiadomość1 }}h1>
<h1v-inaczej >{{ wiadomość2 }}h1>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane () {
 powrót {
 message1: 'To jest Twoja aplikacja Vue',
 wiadomość2: „Jeszcze nie jest to aplikacja Vue”.
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>
HTML>

Powyższy blok kodu przedstawia aplikację Vue utworzoną przez dodanie pliku Sieć dostarczania treści (CDN) link do treści twojego pliku HTML. Dyrektywa v-if wyrenderuje element h1 tylko wtedy, gdy jego warunek jest prawdziwy.

W aplikacjach Vue zdarzają się sytuacje, w których trzeba wyrenderować komponent na podstawie określonych kryteriów dynamicznych. Jest to przydatne w scenariuszach, takich jak wyświetlanie informacji tylko wtedy, gdy użytkownik kliknie przycisk lub wyświetlanie wskaźnika ładowania podczas ładowania danych z interfejsu API.

Na przykład:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<dzv-jeśli=„pokaż użytkowników”>
<ul>
<li>Użytkownik1li>
<li>Użytkownik2li>
ul>
dz>
<przyciskv-on: kliknij="toggleShowUsers()">
 Przełącz użytkowników
przycisk>
<h1>{{ wiadomość }}h1>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane () {
 powrót {
 pokażUżytkownicy: prawda,
 wiadomość: „To jest Twoja aplikacja Vue”.
 }
 },
 metody: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>
HTML>

Powyższy blok kodu wykorzystuje v-jeśli dyrektywa do warunkowego renderowania treści na podstawie wartości zmiennej boolowskiej, pokażUżytkownicy.

The dz element jest wyświetlany, jeśli wartość jest PRAWDA i ukryte, jeśli tak jest FAŁSZ. Klikając Przełącz użytkowników przycisk uruchamia togglePokażUżytkownicy() sposób zmiany wartości pokażUżytkownicy.

W tym przykładzie użyto również v-on dyrektywę do nasłuchiwania zdarzeń, takich jak zdarzenie kliknięcia przycisku. Ponownie ocenia v-jeśli dyrektywa zawsze, gdy wartość pokażUżytkownicy zmiany.

Osiągnięcie renderowania warunkowego za pomocą dyrektywy v-show

The v-pokaz dyrektywa to kolejny sposób na warunkowe pokazywanie lub ukrywanie elementów w Vue.js. Jest podobny do v-jeśli dyrektywę, ponieważ może renderować elementy na podstawie wyrażenia logicznego. Istnieją jednak pewne zasadnicze różnice między tymi dwiema dyrektywami.

The v-pokaz dyrektywa nie usuwa elementu z modelu DOM, gdy wyrażenie ma wartość false. Zamiast tego używa CSS do przełączania elementu wyświetlacz nieruchomość pomiędzy nic i jego pierwotnej wartości.

Oznacza to, że element jest nadal obecny w DOM, ale nie jest widoczny, gdy wyrażenie jest fałszywe.

Oto przykład:

<ciało>
<dzID=„aplikacja”>
<dzv-jeśli=„pokaż użytkowników”>
<ul>
<li>Użytkownik1li>
<li>Użytkownik2li>
ul>
dz>
<przyciskv-on: kliknij="toggleShowUsers()">
 Przełącz użytkowników
przycisk>
<h1v-pokaz=„pokaż użytkowników”>{{ wiadomość }}h1>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane () {
 powrót {
 pokażUżytkownicy: prawda,
 wiadomość: „To są użytkownicy aplikacji Vue”
 }
 },
 metody: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>

Powyższy blok kodu wykorzystuje v-pokaz dyrektywę, aby wyświetlić komunikat o treści „To są użytkownicy aplikacji Vue” za każdym razem, gdy klikniesz przycisk przełączania.

Wybór między v-if a v-show

Decydując się na skorzystanie z v-jeśli I v-pokaz dyrektyw do warunkowego pokazywania lub ukrywania elementów w Vue.js, należy wziąć pod uwagę kilka ważnych czynników.

Kiedy stan rzadko się zmienia, używając v-jeśli dyrektywa jest dobra. To dlatego, że v-jeśli usuwa element z DOM, gdy warunek jest fałszywy, co może utrudniać optymalną wydajność. Element jest renderowany tylko wtedy, gdy warunek stanie się prawdziwy, i usuwany z DOM, gdy warunek ponownie stanie się fałszywy.

Z drugiej strony, jeśli warunek może się często zmieniać, lepiej jest użyć metody v-pokaz dyrektywę, która poprawia wydajność. To dlatego, że v-pokaz używa CSS do ukrycia lub pokazania elementu, przełączając właściwość CSS display między none a block, pozostawiając element zawsze renderowany w DOM.

Łatwe renderowanie warunkowe w aplikacji Vue

Nauczyłeś się warunkowego renderowania treści w aplikacjach Vue za pomocą dyrektyw v-if i v-show. Korzystając z tych dyrektyw, możesz szybko renderować zawartość w oparciu o różne warunki, co daje większą kontrolę nad wyglądem i zachowaniem komponentów Vue.