Attributes: Alpine JS classes 7

Now we are going to learn a little about the same thing we did before, following the same guidelines, we are going to learn about attribute bidding, in this case of classes, in case any doubts arise, since here it is also a little more interesting, since it is not only a true and false conduction as linear as the one we had before when we placed an expression, but notice that the syntax changes a little in this case, what we are doing is that this class is going to be applied if and only if the following condition is met, the negation of women or woman, as you want to call it:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': !mujer }" x-on:click="mujer=false">Hombre</button>
    <button :class="{ 'hidden': mujer }" @click="mujer=true">Mujer</button>
    <p x-text="mujer"></p>
</div>

Following the previous example a little bit, then for this I am going to ask you to replicate these classes that we have here, at least the Heiden one, which is the one we are going to use. I think we will use the rest more later on. You can place it directly in the HTML document.

x-bind:class

So we are going to present the class biden in this case that obviously a class is an attribute but it is as who says some things change and it is important to know them in this case remembering a little this is simply a true and false condition:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': mujer }" x-on:click="mujer=false">Hombre</button>

We can also place this as I mentioned before, simply place man here and it will take it and here we could place the negated, the same as we could do in javascript:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': !mujer }" x-on:click="mujer=false">Hombre</button>

First you put here what would be returned:

x-bind:class="{ 'hidden': }"

And over here the expression in case it also clashes with you then I leave it there Well here I don't know what you want in this case Woman in the example I think I have it here is in negated so we are going to follow it and here It would be more or less the same in this case we are not disabling it but directly we are hiding it based on the class that we have defined here that obviously can be in a separate style sheet and everything else that is up to you to apply animations, transitions it doesn't matter and here it would be the opposite and again this is optional and you can just put the two points at least for another time the version of Visual Studio Code that I am using does not interpret this correctly but really these are equivalent here I am going to put a space we come here always pending that you do not have errors and now you can see how it works now in this case instead of disabling it it hides it and this too you can see it over here look that here it is this would be the one for man:

<button :class="{ 'hidden': mujer }" @click="mujer=true">Mujer</button>
    <p x-text="mujer"></p>

This is what is happening but in the end it is also disabled so it is basically that and what happens if you want to define multiple classes in this case we also define one here for the border for example which is good a beautiful solid px black color simply here you put a comma and here we put in this case it is Border and we put the expression:

<div x-data="{ border:true, bg:false }">
    <button @click="border=!border">Border</button>
    <button @click="bg=!bg">Fondo</button>
    <div class="box" :class="{ 'border': border == true , 'bg' : bg }"></div>
    <div class="box" :class="{ border, bg  }"></div>
</div>

In this case it is the same so we define it here to see it may be upside down since here it is hiding this does not make sense really it would be for the one below here I am going to place this here here I deny it would be the opposite and here I remove the comma that it is an object Remember that this is the syntax of an object here notice that now it has a border you can see it if we inspect it notice that the border class is being applied and also nothing else obviously it is the other way around because remember that this class is to hide it and if you hide it no matter what style it has you will not be shown therefore here it is the negated that is to say remember that if this is not fulfilled Then it is being shown and therefore we take advantage of it and we place the border in what happens and Well here you can see that it works without problem and from there you can place anything else for example the bg bg very nice that its garish you can do here for example so that it looks better bg in case you do not see the border I place a bg and there you have it a color beautiful finally another way here you can also place the bg then it would apply both the border that you can see there and the color and here you can also rely on your insector here This is the one that would be seen the one that says wman in my case then here I have the border and also the bg applied and well that's basically it so this would be I think the main thing both to define a class individually as well as to define a class individually or as if you want to define multiple classes based on other conditions this Remember that it is also a completely independent condition that can be another property a variable here called I don't know Main or directly based on some condition that has occurred there That is to say, this expression is completely independent from the one we have here you can evaluate based on your needs so without further ado let's go to the next class

23-11-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Attributes: Alpine JS classes 7