# Attribute Binding

This page covers binding data to HTML attributes with the `:` or `q-` prefix, and how `:hide` is evaluated.

## Syntax

```html
<a :href="link" :title="label">{{ label }}</a>
<img :src="avatar" :alt="name" />
<button q-data-id="userId">Edit</button>
<a :href="/user/{{ userId }}">Profile</a>
```

| Prefix | Description |
|---|---|
| `:` | Standard form, for example `:href` |
| `q-` | Equivalent form, for example `q-href`; useful for toolchains that reject `:` in attribute names |

The attribute value is first looked up as a data path; when nothing matches, the value itself is used. When the value contains `{{ }}`, only the first `{{ }}` is replaced and the surrounding text is kept. The original `:` attribute is removed afterwards.

## Dispatch Rules

| Attribute | Written as |
|---|---|
| `:id`, `:src`, `:alt`, `:href` | Element property |
| `:html` | `innerHTML`, see [Text Binding](/text-binding) |
| `:` prefix and the name matches a CSS property (such as `:width`, `:color`) | Written to `style`, see [Style Binding](/style-binding) |
| `:hide` | Sets `display: none` when truthy |
| `:lazyload` | See [Image Lazy Loading](/lazyload) |
| Anything else (such as `:title`, `:data-id`, `:value`) | `setAttribute` with the prefix stripped |

Names that match a CSS property always go to `style`: `<img :width="w">` sets the CSS `width`, not the `width` attribute.

## `:hide`

```html
<div :hide="isHidden">Content</div>
```

| Value | Result |
|---|---|
| `true`, non-zero numbers, non-empty strings | Hidden |
| `false`, `0`, `"0"`, empty string | Shown |
| A key that does not exist in data | The attribute value itself (a non-empty string) is used, so the element is hidden |

The string `"false"` is truthy and also hides the element; use booleans.

## Localized Attribute Values

Any attribute whose value is `i18n.key` is replaced with the translation for the current locale, for example `placeholder="i18n.search"`. Attributes only support single-level keys, see [i18n](/i18n).