表单输入绑定

v-model 在不同类型的表单元素上有不同的行为。

文本

<input v-model="message" placeholder="输入..." />
<p>{{ message }}</p>

多行文本

<textarea v-model="message"></textarea>

在 <textarea> 中使用 v-model，不要使用插值表达式。

复选框

单个复选框

<input type="checkbox" v-model="checked" />
<label>{{ checked }}</label>

绑定布尔值。

多个复选框

<input type="checkbox" v-model="selected" value="A" />
<input type="checkbox" v-model="selected" value="B" />
<p>选中: {{ selected.join(', ') }}</p>

绑定数组。

单选按钮

<input type="radio" v-model="picked" value="One" />
<input type="radio" v-model="picked" value="Two" />
<p>选中: {{ picked }}</p>

选择器

<select v-model="selected">
  <option value="">请选择</option>
  <option>A</option>
  <option>B</option>
</select>

多选

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
</select>

v-model 修饰符

<!-- 自动转为 Number -->
<input v-model.number="age" type="number" />

<!-- 自动去空格 -->
<input v-model.trim="name" />

<!-- 延迟同步（change 事件） -->
<input v-model.lazy="msg" />

要点总结

• v-model 根据表单元素类型自动选择正确的绑定方式
• 复选框可绑定布尔值（单个）或数组（多个）
• 单选按钮和下拉选择绑定字符串值
• 修饰符 .number、.trim、.lazy 控制数据转换