表單綁定

本頁說明 :model 如何把表單輸入寫回資料。

寫法

<div id="app">
  <input type="text" :model="username" />
  <p>Hello, {{ username }}</p>
</div>

<script>
  const app = new QUI({ id: "app", data: { username: "" } });
</script>

即時預覽 · @pardnchiu/quickui@0.6.21

各元素的行為

元素	監聽事件	寫入 `app.data[key]` 的值
`<input>`（文字類）、`<textarea>`	`keyup`、`change`	`value`，空值為 `""`
`<select>`	`change`	選取項目的 `value`
`<input type="checkbox">`、`<input type="radio">`	`change`	頁面上同 `name`、同 `type` 且已勾選者的 `value`，以 `,` 串接

其他元素上的 :model 會被忽略。