Vue: 表单输入绑定

1. 概述

        Vue 提供了 v-model 指令，用于在表单元素和 JavaScript 状态之间创建双向数据绑定，极大简化了表单处理流程。

2. 基本原理

2.1 手动绑定方式

<input
  :value="text"
  @input="event => text = event.target.value">

2.2 v-model 简化方式

<input v-model="text">

3. v-model 对不同元素的处理

元素类型	绑定的属性	监听的事件
<input type="text">, <textarea>	value	input
<input type="checkbox">, <input type="radio">	checked	change
<select>	value	change

注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute，始终将 JavaScript 状态视为数据源。

4. 基本用法

4.1 文本输入

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

4.2 多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

注意：<textarea> 中不支持插值表达式，必须使用 v-model。

4.3 复选框

单个复选框

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

多个复选框（绑定到数组）

<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

const checkedNames = ref([])

4.4 单选按钮

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

4.5 选择器

单选

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

多选

<div>Selected: {{ selected }}</div>

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

动态选项

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

const selected = ref('A')
const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

5. 值绑定

5.1 复选框值绑定

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

动态绑定：

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

5.2 单选按钮值绑定

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

5.3 选择器选项值绑定

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

6. 修饰符

6.1 .lazy

将输入事件改为变更事件后更新：

<input v-model.lazy="msg" />

6.2 .number

自动将用户输入转换为数字：

<input v-model.number="age" />

6.3 .trim

自动去除用户输入内容两端的空格：

<input v-model.trim="msg" />

7. 组件上的 v-model

        自定义组件也可以支持 v-model，这需要在组件内部实现相应的接口。具体用法参考 Vue 组件相关文档。

8. 总结

8.1 v-model 工作原理流程图

8.2 不同表单元素处理方式对比表

元素	绑定属性	监听事件	特殊注意事项
text/textarea	value	input	IME输入需特殊处理
checkbox	checked	change	多选时绑定到数组
radio	checked	change	通过value区分选项
select	value	change	需提供空选项避免iOS问题

8.3 核心要点总结

1. 双向绑定简化：v-model 极大简化了表单处理，无需手动连接值绑定和事件监听

2. 智能适配：根据元素类型自动选择正确的属性和事件

3. 值绑定灵活性：支持静态值和动态值绑定，甚至对象类型

4. 修饰符增强：通过修饰符可以轻松实现延迟更新、数字转换和trim功能

5. 组件支持：可以扩展到自定义组件，实现统一的数据流管理

8.4 最佳实践

1. 始终在JavaScript中声明初始值，而不是依赖HTML属性

2. 对于需要IME输入的场景，考虑使用手动绑定替代v-model

3. 使用适当的修饰符优化用户体验和数据处理

4. 对于复杂的表单场景，可以考虑结合使用自定义组件和v-model

通过掌握v-model的使用，可以大大提高Vue应用中表单处理的效率和质量。