Attributes: x-bind in Alpine.js 6

The next thing we are going to see would be the attribute bind, for this I show you the following example here:

<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>

Let's remember that at least for the moment we have worked with some attributes although they can be called custom attributes, that is, they are not part of the html lpi, what do I mean by this? attributes like x-data as I was telling you, this is not part of the html API, that is, it exists in Alpine. If we were to remove the Alpine import, the x-* attributes mean absolutely nothing unless we either use alpine, which is what we are doing, or we do some custom development, for example in javascript, in which we can interpret this to do something, but none of this is part of it. Again, the html API is custom attributes, but of course in the html API we have attributes that we can use, one of them is, for example, disable, everything depends on the html element. Obviously, this is a small review. I assume that you already know this because obviously you are watching this course, but it is to put it in context. For example, I come here right now it is enabled. Note that now it is disabled, so depending on the type of html element we have some attributes or others. For example, here in the input we can also here the disable or the readonly:

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

I'm going to put here for example women or women woman in singular I'm going to put it by default to true and here I'm going to put a button so here it can simulate that this first button you have to select if you are a woman and a form or something like that would be enabled we will do this or we will see it little by little later for example with the conditionals then and if you don't enable the other one which is for man:

<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

En español

• Category
• /
• JavaScript
• /
• Attributes: x-bind in Alpine.js 6