Conditionals: x-if Alpine JS 10
We are going to learn about the x-if which was similar to the show that I mentioned at the beginning. I don't have an exercise in the book so I'm going to use this one and we're going to remember a little bit what this x-if does:
<div x-data="">
<template x-if="true">
<span>
Content... if
</span>
</template>
</div>
Note that what it does is simply place an attribute here or rather a display node style that hides it as you can see, that is basically what it is, this is a characteristic that is identical so what does X If this is not going to work but I think it is important to place it, I am going to keep this one here, I can place show and here so that it is better understood:
<div x-data="">
<span x-show="true">
Content... show
</span>
<template x-if="true">
<span>
Content... if
</span>
</template>
</div>And we can see the exercise better here Note that it does not work, it does not grab it no matter what we put here that is always here is the official documentation as indicated, it has the skill here of placing the template just like what happens with the x-for so I go to this I put it here eye that this is not necessary but so that you can compare it I place the template up here we place template I put this over here and roll this now it will work since again it asks for the template wrapper it is something from alpine as such you can see then what is the difference really here we always have the rendering of the template which is something already as who says this is how alpine works internally the difference of Vue and I think the other react frameworks angular among others:
<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>They don't render it but in this case it does render it:
<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>But notice that even though it is not part of it, we don't even select it and notice that it doesn't even appear, it's like it's handled internally by Alpine. I really don't know very well how it does it here because it is represented but it doesn't appear. I don't know exactly what Alpine does to not show the content:
<template x-if="open">
<span>
Content... if
</span>
</template>But even though that is to be used internally by Alpine, but notice what is important is here, here again we have the display node when it is turned off and here it is rendered outside the Template, notice how they say therefore here you can see that it has a different organization if we turn it off, notice that the element is removed it keeps it here as a copy, then Alpine internally already knows what this is and removes it, but that is the difference, basically on the one hand, what the show does is simply hide it using CSS as you can see and what the x-if does is render or remove it or not render based on the conditional condition, therefore the x-if is more expensive than simply defining a ccs rule and therefore as a general rule, xow should be used, just like viw, which is the elv show, whenever possible, and if for your development it does not have to be present since it may be that internally here you have other conditionals that you can only apply based on whether this condition is met, then only in these cases is that you should apply the If, be careful, in the end this is a lot of jargon. In terms of performance, they will surely be practically the same because the equipment here is becoming more and more powerful, but as they say, by basic or general rules. So, well, that is the example and without further ado, let's move on to the next class.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter