Atributos: x-bind en Alpine.js 6

La siguiente que vamos a ver sería el bind de atributos para esto te muestro aquí el siguiente ejemplo:

<div x-data="{ woman:false }">
   <!-- <button x-bind:disabled="woman==false" @click="woman=false"> -->
   <button x-bind:disabled="!woman" @click="woman=false">
       Man
   </button>
   <!-- <button :disabled="woman==true" @click="woman=true"> -->
   <button :disabled="woman" @click="woman=true">
       Woman
   </button>
</div>

Recordemos que al menos de momento si hemos trabajado con algunos atributos aunque se pueden llamar como atributos personalizados es decir no forman parte de lpi de html a qué me refiero con esto atributos como x-data como te indicaba esto no forma parte del API de html es decir existe es en Alpine si quitáramos la importación de Alpine, los atributos x-* no significan absolutamente nada al menos que nosotros o ya sea empleemos alpine que es lo que estamos haciendo o hagamos algún desarrollo personalizado para por ejemplo en javascript en la cual podamos interpretar esto para hacer algo pero nada de esto forma parte otra vez la API de html son atributos personalizados pero por supuesto que en el API de html tenemos atributos que podemos emplear uno de ellos viene siendo por ejemplo el de disable todo depende del elemento html obviamente esto es un pequeño repaso ya esto yo lo doy por hecho de que ya uú lo conoces porque obviamente estás viendo este curso pero es para entrar en contexto por ejemplo vengo aquí ahorita está habilitado fíjate que ahora está deshabilitado entonces dependiendo del tipo de elemento html tenemos algunos atributos u otros por ejemplo aquí en el de input podemos también aquí el de disable o el de readonly:

<button :disabled="woman" @click="woman=true">
    Woman
</button>

Voy a colocar aquí por ejemplo women o women mujer en singular voy a colocarla por defecto en true y por aquí voy a colocar un botón entonces aquí puede simular de que este primer botón tú tienes que seleccionar si eres mujer y se habilitaría algún formulario o algo por el estilo esto lo haremos o lo iremos viendo poco a poco más adelante por ejemplo con los condicionales entonces y si no habilitas el otro que es el de hombre:

<div x-data="{ woman:false }">
   <!-- <button x-bind:disabled="woman==false" @click="woman=false"> -->
   <button x-bind:disabled="!woman" @click="woman=false">
       Man
   </button>
   <!-- <button :disabled="woman==true" @click="woman=true"> -->
   <button :disabled="woman" @click="woman=true">
       Woman
   </button>
</div>

22-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Atributos: x-bind en Alpine.js 6