Documentation v0.6.19
Home GitHub

Attribute Binding

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

Syntax

<div id="app">
  <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>
</div>

<script>
  const app = new QUI({
    id: "app",
    data: {
      link: "https://quickui.pardn.io",
      label: "Docs",
      avatar: "https://quickui.pardn.io/favicon.png",
      name: "QuickUI",
      userId: 42,
    },
    when: {
      rendered: () => [...$("app").children].forEach((e) => console.log(e.outerHTML)),
    },
  });
</script>
Live preview · @pardnchiu/quickui@0.6.21
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
: prefix and the name matches a CSS property (such as :width, :color) Written to style, see Style Binding
:hide Sets display: none when truthy
:lazyload See Image Lazy Loading
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

<div id="app">
  <div :hide="isHidden">Content</div>
  <button @click="toggle">Toggle</button>
</div>

<script>
  const app = new QUI({
    id: "app",
    data: { isHidden: false },
    event: {
      toggle: () => {
        app.data.isHidden = !app.data.isHidden;
      },
    },
    when: {
      updated: () => console.log(app.data.isHidden, $("app").children[0].outerHTML),
    },
  });
</script>
Live preview · @pardnchiu/quickui@0.6.21
Value Result
true, non-zero numbers, non-empty strings Hidden
false, 0, "0", empty string Shown; the value is written as a hide attribute (for example hide="false")
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.

Once hidden, setting the value back to a falsy one does not remove display: none, so the element stays hidden. Press Toggle twice in the preview above to reproduce it.

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.

中文