Documentation v0.6.19
Home GitHub

Text Binding

This page covers writing data into text with {{ }} and inserting HTML with :html.

{{ value }}

<div id="app">
  <h1>{{ title }}</h1>
  <p>{{ user.name }} · {{ LENGTH(items) }} items</p>
</div>

<script>
  const app = new QUI({
    id: "app",
    data: { title: "QuickUI", user: { name: "Pardn" }, items: [1, 2, 3] },
  });
</script>
Rule Description
Allowed characters Letters, digits, underscores and .; may be wrapped in a built-in function
Whitespace Both {{title}} and {{ title }} work
Missing value {{ title }} stays on the page as written
Localization {{ i18n.key }} reads the current locale, see i18n
Position Replaced only in text nodes; {{ }} inside plain attributes is left alone, use Attribute Binding for attributes

:html

<section :html="content"></section>

<script>
  const app = new QUI({
    id: "app",
    data: { content: "<b>bold</b> text" },
  });
</script>

:html writes the value to innerHTML; when no matching data exists, the attribute value itself is written. Content is not sanitized, so never pass unescaped user input, or the page is open to XSS.

中文