Condicionales: x-if Alpine JS 10
Vamos a conocer el uso del condicional en Alpine JS.
Vamos a conocer el x-if que era similar al show que te indicaba al inicio no tengo un ejercicio en el libro así que voy a ocupar este mismo y vamos a recordar un poco qué es lo que hace este el x-if:
<div x-data="">
<template x-if="true">
<span>
Content... if
</span>
</template>
</div>
Fíjate que lo que hace es simplemente colocar aquí un atributo o mejor dicho un estilo de display node que lo que hace es ocultarlo tal cual puedes ver es básicamente eso est es una característica que es idéntica por entonces qué es lo que hace el X If esto no va a funcionar pero me parece importante colocarlo voy a mantener este aquí puedo colocar show y aquí para que se entienda mejor:
<div x-data="">
<span x-show="true">
Content... show
</span>
<template x-if="true">
<span>
Content... if
</span>
</template>
</div>Y podamos ver ahí mejor el ejercicio aquí Fíjate que no funciona no lo agarra da igual lo que coloquemos acá que siempre está aquí es la documentación oficial tal cual indican tiene la maña aquí de colocar el template al igual que ocurre con el x-for así que voy a esto coloco aquí ojo que esto no hace falta pero para que lo compares coloco aquí arriba el template colocamos template coloco esto por acá y ruedo esto ahora sí va a funcionar ya que otra vez é pide el envoltorio del template ya es algo de alpine tal cual puedes ver entonces cuál es la diferencia realmente aquí siempre tenemos la renderización del template que es algo ya como quien dice así funciona internamente alpine la diferencia de Vue y creo que los otros framework de react angular entre otros:
<div x-data="{ open: false }">
<button @click="open=!open">
Click!</button>
<span x-show="open">
Content... show
</span>
<template x-if="open">
<span>
Content... if
</span>
</template>
</div>Ellos no lo renderizar pero en este caso sí lo renderiza:
<div x-data="{ open: false }">
<button @click="open=!open">
Click!</button>
<span x-show="open" style="display: none;">
Content... show
</span>
<template x-if="open">
<span>
Content... if
</span>
</template>
</div>Pero fíjate que por más que sea no forma parte aquí del ni siquiera lo seleccionamos y fíjate que ni siquiera aparece es como que manejado internamente por alpine realmente no sé muy bien cómo hace aquí porque está representado pero no aparece no sé exactamente que es lo que hace alpine para no mostrar el contenido:
<template x-if="open">
<span>
Content... if
</span>
</template>Pero por más que sea eso es para utilizarlo internamente alpine pero fíjate lo importante es aquí aquí otra vez tenemos es el display node cuando está apagado y aquí se renderiza fuera del Template fíjate como quien dice por lo tanto aquí ya puedes ver que tiene una organización distinta si lo apagamos fíjate que el elemento es removido lo mantiene aquí como una copia entonces ya alpine internamente ya sabe que es esto y lo saca pero eso es la diferencia básicamente por una parte el show lo que hace es simplemente ocultarlo mediante css tal cual puedes ver y lo que hace el x-if es renderizar o o quitarlo o no renderizar en base a la condición de condicional por lo tanto el del x-if es más costoso que simplemente definir una regla ccs y por lo tanto como regla en general se debería emplear el xow al igual que ocurre con viw que es elv show cada vez que sea posible y si para tu desarrollo no tiene que estar presente ya que puede ser que aquí internamente tengas otras condicionales que solamente lo puedes aplicar en base a si esta condición se cumple entonces solamente en estos casos es que deberías de aplicar el If ojo que a la final esto es mucha jerga sea realmente en términos de rendimiento seguramente van a ser prácticamente iguales porque cada vez aquí los equipos son más potentes pero como quien dice por reglas básicas o generales así que bueno eso viene siendo el ejemplo y sin más que decir vamos a la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter