x-if

x-if sert à afficher ou retirer des éléments de la page, comme x-show, mais il ajoute et retire complètement l'élément auquel il s'applique, au lieu de simplement passer sa propriété CSS display à « none ».

En raison de cette différence de comportement, x-if ne doit pas être appliqué directement à l'élément, mais à une balise <template> qui l'englobe. Ainsi, Alpine peut conserver une trace de l'élément une fois celui-ci retiré de la page.

<template x-if="open">
    <div>Contenu...</div>
</template>

Remarque : bien que cela ne figure pas dans l'extrait ci-dessus, x-if ne peut pas être utilisé si aucun élément parent ne définit x-data. → En savoir plus sur x-data

Points d'attention

Contrairement à x-show, x-if ne prend PAS en charge les transitions avec x-transition.

Les balises <template> ne peuvent contenir qu'un seul élément racine.

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev