This content originally appeared on DEV Community and was authored by Félix Moreno
Alpine.js es una librería JavaScript liviana y poderosa que permite agregar interactividad a nuestras páginas web de manera simple y efectiva.
En este artículo, vamos a utilizar Alpine.js para mostrar y ocultar elementos.
Ejemplo:
A continuación veremos un ejemplo que demuestra cómo usar Alpine.js para mostrar y ocultar un elemento:
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div x-data="{ isOpen: true }">
<button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>
<h1 x-show="isOpen">Página de Inicio</h1>
</div>
</body>
</html>
Explicación del código:
x-data:
La directiva x-data inicializa un objeto Reactivo en Alpine.js. En este caso, declaramos isOpen con un valor inicial de true.
<div x-data="{ isOpen: true }">
Botón con x-on:click:
La directiva x-on:click escucha el evento de clic en el botón y alterna el valor de isOpen entre true y false.
<button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button>
Elemento con x-show:
La directiva x-show controla la visión del elemento según el valor de isOpen. Si es true, el elemento se muestra; si es false, el elemento se oculta.
<h1 x-show="isOpen">Página de Inicio</h1>
Resultado:
Al cargar la página en el navegador, debe verse lo siguiente:
Al dar clic en el botón, se dejará de ver el elemento con el texto Página de Inicio, así:
This content originally appeared on DEV Community and was authored by Félix Moreno
Félix Moreno | Sciencx (2025-01-20T17:54:37+00:00) 2- Alpine.js: Mostrar u ocultar contenido. Retrieved from https://www.scien.cx/2025/01/20/2-alpine-js-mostrar-u-ocultar-contenido/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.