🦉 表单输入绑定 🦉

在实际开发中，我们经常需要读取 HTML input（或 textarea、select）中的值以便使用（注意：它不需要在 <form> 表单中！）。一种可行的方式是手动处理：

class Form extends owl.Component {
  state = useState({ text: "" });

  _updateInputValue(event) {
    this.state.text = event.target.value;
  }
}

xml

<div>
  <input t-on-input="_updateInputValue" />
  <span t-esc="state.text" />
</div>

这种方式可以正常工作。但这需要一些额外的“连接”代码（plumbing code）。此外，如果你需要处理复选框（checkbox）、单选框（radio）或下拉框（select），代码会稍有不同。

为了解决这个问题，Owl 提供了内建指令 t-model：它的值应为组件中被观察的值（通常是 state.someValue）。使用 t-model 指令后，我们可以写出更简洁的代码，实现与上面相同的功能：

class Form extends owl.Component {
  state = { text: "" };
}

xml

<div>
  <input t-model="state.text" />
  <span t-esc="state.text" />
</div>

t-model 指令支持以下标签：

<input>
<input type="checkbox">
<input type="radio">
<textarea>
<select>

示例：

xml

<div>
    <div>输入框文本：<input t-model="state.someVal"/></div>
    <div>多行文本框：<textarea t-model="state.otherVal"/></div>
    <div>布尔值绑定：<input type="checkbox" t-model="state.someFlag"/></div>
    <div>下拉选择：
        <select t-model="state.color">
            <option value="">选择一个颜色</option>
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
        </select>
    </div>
    <div>
        单选按钮选择：
        <span>
            <input type="radio" name="color" id="red" value="red" t-model="state.color"/>
            <label for="red">红色</label>
        </span>
        <span>
            <input type="radio" name="color" id="blue" value="blue" t-model="state.color" />
            <label for="blue">蓝色</label>
        </span>
    </div>
</div>

与事件处理类似，t-model 指令也支持以下修饰符（modifiers）：

修饰符	描述
`.lazy`	在 `change` 事件时更新值（默认是在 `input` 事件）
`.number`	尝试将值转换为数字（使用 `parseFloat`）
`.trim`	去除值的首尾空格

例如：

xml

<input t-model.lazy="state.someVal" />

这些修饰符可以组合使用。例如：t-model.lazy.number 表示仅在值更改后更新为一个数字。

提示：在线 playground 中有相关示例可以查看其工作效果。

🦉 表单输入绑定 🦉 ​

🦉 表单输入绑定 🦉