|
@@ -252,23 +252,23 @@ In this example, the "hidden" class will only be applied when the value of the `
|
|
|
|
|
|
**`x-bind` for boolean attributes**
|
|
|
|
|
|
-`x-bind` supports boolean attributes in the same way that value attributes, using a variable as the condition or any JavaScript expression that resolves to `true` or `false`.
|
|
|
+`x-bind` supports boolean attributes in the same way as value attributes, using a variable as the condition or any JavaScript expression that resolves to `true` or `false`.
|
|
|
|
|
|
For example:
|
|
|
-`<button x-bind:disabled="myVar">Click me</button>`
|
|
|
-
|
|
|
-This will add or remove the `disabled` attribute when `myVar` is true or false respectively.
|
|
|
-
|
|
|
-Boolean attributes are supported as per the [HTML specification](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), for example `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open` etc.
|
|
|
+```html
|
|
|
+<!-- Given: -->
|
|
|
+<button x-bind:disabled="myVar">Click me</button>
|
|
|
|
|
|
-**`x-bind` attribute removal rule for `null`/`undefined`/`false` values**
|
|
|
+<!-- When myVar == true: -->
|
|
|
+<button disabled="disabled">Click me</button>
|
|
|
|
|
|
-For attributes that aren't standard boolean attributes (per the HTML spec, see previous section). It's still possible to mark the attribute for _removal_ when it gets passed `null`, `undefined` or `false`. This is in contrast to the regular behaviour where the attribute is set to the string representation of the value it's bound to (even other falsy values `''`, `0`, `NaN` etc).
|
|
|
+<!-- When myVar == false: -->
|
|
|
+<button>Click me</button>
|
|
|
+```
|
|
|
|
|
|
-For example:
|
|
|
-`<a x-bind:href="enabled ? link : null"></a>`
|
|
|
+This will add or remove the `disabled` attribute when `myVar` is true or false respectively.
|
|
|
|
|
|
-This will completely remove the `href` attribute when `enabled` is false but set it to the value of `link` when enabled is true.
|
|
|
+Boolean attributes are supported as per the [HTML specification](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), for example `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, etc.
|
|
|
|
|
|
---
|
|
|
|