表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

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

v-model指令帮我们简化了这一步骤：

<input v-model="text">

另外，v-model还可以用于各种不同类型的输入元素。它会根据所使用的元素自动扩展到不同的 DOM 属性和事件组合：

• 文本类型的<input>、<textarea>元素会使用到value属性和input事件；
• <input type="checkbox">和<input type="radio">使用checked property 和change事件；
• <select>使用的value属性和change事件。

v-model会忽略所有表单元素的 attribute 的初始值（比如：value、checked、selected）。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中声明该初始值，使用响应式数据。

基础用法

文本（text）

<p>输入的信息：{{ message }}</p>
<input v-model="message" placeholder="edit me..." />

对于需要使用IME的语言(中文，日文和韩文等)，你会发现v-model不会在IME输入的组合状态时触发更新。如果你的确想在此时也触发更新，请使用input事件监听器和value绑定值而不要使用v-model。

多行文本（textarea）

<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来替代。

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框（checkbox）

单一的复选框，绑定的是布尔类型值：

const checked= ref(false)

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

我们还可以将多个复选框绑定到同一个数组或集合的值：

const checkedNames = ref([])

<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>

单选框（radio）

const picked = ref('')

<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>

选择框（select）

单个选择器的示例如下：

const selected = ref('')

<div>选择的是: {{ selected }}</div>
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

多选(值绑定到一个数组)：

const selected = ref('')

<div>选择的是: {{ selected }}</div>
<select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

用v-for渲染的动态选项：

const selected = ref('A')

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

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

值绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
    <option value="abc">ABC</option>
</select>

但有时我们可能希望将该值绑定到当前活动实例上的动态属性，那么可以使用v-bind来做到。此外使用v-bind还使我们可以将选项值，绑定为非字符串类型。

复选框（checkbox）

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

true-value和false-value是 Vue 特有的 attributes 且仅会在v-model存在时工作。这里toggle属性的值会在选中时被设为yes，取消选择时设为no。你同样可以通过v-bind将其绑定为其他动态值。

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

true-value和false-value attributes 不会影响value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值（例如：“yes”和“no”）的其中之一被表单提交，请使用单选按钮作为替代。

单选框（radio）

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

pick会在第一个按钮选中时被设为first，在第二个按钮选中时被设为second。

选择框（select）

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

v-model同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected会被设为该对象字面量值{number: 123}。

修饰符

.lazy

懒加载。在默认情况下，v-model在每次input事件触发后，将输入框的值与数据进行同步(除了上述输入法组织文字时)。你可以添加lazy修饰符，从而转为在change事件之后，更新数据同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

.number

确保为数值。如果想自动将用户的输入值自动转为数值类型，可以给v-model添加number修饰符：

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

这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。

.trim

去除两端空格。如果要自动去除用户输入内容中两端的空格，可以给v-model添加trim修饰符：

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

在组件上使用v-model

HTML 原生的输入元素类型并不总能满足需求。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和v-model一起使用！