La renderització condicional en Vue.js permet mostrar o amagar elements del DOM basant-se en condicions específiques. Això és molt útil per crear interfícies d'usuari dinàmiques que responen a l'estat de l'aplicació.
Conceptes clau
Directiva v-if
La directiva v-if s'utilitza per renderitzar un element només si una condició és verdadera.
<div id="app">
<p v-if="isVisible">Aquest text es mostra si isVisible és true.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>Directiva v-else
La directiva v-else s'utilitza per renderitzar un element quan la condició de v-if és falsa.
<div id="app">
<p v-if="isVisible">Aquest text es mostra si isVisible és true.</p>
<p v-else>Aquest text es mostra si isVisible és false.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: false
}
});
</script>Directiva v-else-if
La directiva v-else-if s'utilitza per especificar una condició addicional si la condició de v-if és falsa.
<div id="app">
<p v-if="status === 'success'">Operació exitosa!</p>
<p v-else-if="status === 'error'">Hi ha hagut un error.</p>
<p v-else>Estat desconegut.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
status: 'error'
}
});
</script>Directiva v-show
La directiva v-show també s'utilitza per mostrar o amagar un element basant-se en una condició, però a diferència de v-if, l'element sempre està present en el DOM i només canvia la seva propietat CSS display.
<div id="app">
<p v-show="isVisible">Aquest text es mostra si isVisible és true.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>Comparació entre v-if i v-show
| Característica | v-if |
v-show |
|---|---|---|
| Renderització | Afegeix o elimina l'element del DOM | Canvia la propietat display de l'element |
| Cost de rendiment | Més alt, ja que implica afegir o eliminar elements del DOM | Més baix, només canvia la propietat CSS |
| Ús recomanat | Quan la condició canvia poc freqüentment | Quan la condició canvia freqüentment |
Exercicis pràctics
Exercici 1: Renderització condicional bàsica
Crea una aplicació Vue que mostri un missatge de benvinguda si l'usuari està autenticat i un missatge d'invitació a registrar-se si no ho està.
<div id="app">
<p v-if="isAuthenticated">Benvingut, usuari!</p>
<p v-else>Si us plau, registra't o inicia sessió.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isAuthenticated: false
}
});
</script>Exercici 2: Utilitzant v-show
Crea una aplicació Vue que mostri o amagui un paràgraf basant-se en l'estat d'un botó.
<div id="app">
<button @click="toggleVisibility">Mostrar/Amagar</button>
<p v-show="isVisible">Aquest text es pot mostrar o amagar.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
});
</script>Errors comuns i consells
-
Error: Utilitzar
v-ifen lloc dev-showper a elements que canvien freqüentment.- Solució: Utilitza
v-showper a elements que necessiten canviar la seva visibilitat sovint per millorar el rendiment.
- Solució: Utilitza
-
Error: Oblidar-se de tancar correctament les directrius
v-elseiv-else-if.- Solució: Assegura't que
v-elseiv-else-ifsegueixin immediatament un element ambv-if.
- Solució: Assegura't que
Resum
En aquesta secció, hem après com utilitzar les directrius v-if, v-else, v-else-if i v-show per a la renderització condicional en Vue.js. Hem vist exemples pràctics i hem comparat les diferències entre v-if i v-show. També hem practicat amb exercicis per reforçar els conceptes apresos. Ara estàs preparat per utilitzar la renderització condicional en les teves aplicacions Vue.js!
Curs de Vue.js
Mòdul 1: Introducció a Vue.js
- Què és Vue.js?
- Configuració de l'entorn de desenvolupament
- Creant la teva primera aplicació Vue
- Entenent la instància de Vue
Mòdul 2: Conceptes bàsics de Vue.js
- Sintaxi de plantilles
- Enllaç de dades
- Propietats computades i observadors
- Enllaços de classes i estils
- Renderització condicional
- Renderització de llistes
Mòdul 3: Components de Vue.js
- Introducció als components
- Props i esdeveniments personalitzats
- Slots
- Components dinàmics i asíncrons
- Comunicació entre components
Mòdul 4: Vue Router
- Introducció a Vue Router
- Configuració de Vue Router
- Rutes dinàmiques
- Rutes niades
- Guàrdies de navegació
Mòdul 5: Gestió d'estat amb Vuex
- Introducció a Vuex
- Estat, getters, mutacions i accions
- Mòduls a Vuex
- Utilitzant Vuex en components
- Patrons avançats de Vuex
Mòdul 6: Directives de Vue.js
Mòdul 7: Plugins de Vue.js
Mòdul 8: Proves en Vue.js
Mòdul 9: Conceptes avançats de Vue.js
- Funcions de renderització i JSX
- Renderització del costat del servidor (SSR) amb Nuxt.js
- API de composició de Vue 3
- Optimització del rendiment