表单输入

v-mode指令用于在表单控件元素上创建双向数据绑定。它可以与input、textarea和select等元素一起使用。它会根据元素对应的DOM属性和事件组合

• v-model在input和textarea元素上创建双向数据绑定，使用value属性和input事件
• v-model在select元素上创建双向数据绑定，使用value属性和change事件
• v-model在checkbox元素上创建双向数据绑定，使用checked属性和change事件
• v-model在radio元素上创建双向数据绑定，使用value属性和change事件

注意 v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。

基本用法

文本

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" /><!-- 也可以使用修饰符 -->
<input v-model.lazy="message" placeholder="edit me" />

对于IME语言,如中文/日文/韩文等，在输入法组合文字过程中可能无法立即得到新的输入值，可以使用lazy修饰符，在change事件中同步更新数据 v-model默认在每次input事件触发后将输入框的值与数据进行同步，可以添加trim修饰符自动过滤用户输入的首尾空白字符

多行文本

注意: <textarea>中不支持插值表达式,应该使用v-model指令

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

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

复选框

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

这样,checkedNames数组将包含所有选中的复选框的值

单选框

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

选择器

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

注意
当<select>元素没有value属性时，v-model将绑定选中的<option>元素的value属性。如果<option>元素没有value属性，则v-model将绑定<option>元素的text内容
当v-model表达式的初始值不匹配任何一个选项的时候,<select>元素会渲染成一个“未选中”状态。在iOS中，这会使用户无法选择第一个选项。因此，建议为<select>添加一个禁用的选项,如上例所示.

多选 : 绑定到一个数组

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

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

选择器的选项可以使用v-for指令进行渲染

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

值绑定

对于单选按钮/复选框和选择器,v-model绑定的值通常是静态的字符串(对复选框是布尔值).但有时我们想绑定到 Vue 实例中的一个动态属性,这时可以使用v-bind指令来实现

v-model 和 v-bind 一起使用

当v-model和v-bind一起使用时,v-model会优先于v-bind进行处理,因此如果你想在v-model中使用动态值,需要将其放在v-model指令中

<input
  type="checkbox"
    v-model="checked"     <!-- 绑定选中状态到数据 -->
    :value="dynamicValue" <!-- 绑定选项代表的值 -->
/>

v-model 和 v-bind 的区别

v-model和v-bind都是用于绑定数据的指令,但它们之间有一些区别:

• v-model是双向绑定的指令,它会自动将数据绑定到表单元素上,并自动更新数据
• v-bind是单向绑定的指令,它只会将数据绑定到表单元素上,不会自动更新数据

类比解释 :

• v-model 像是问卷的答案存储位置（绑定到答卷人的选择结果）
• v-bind:value 像是每个选项的编号（选项A=100分，选项B=80分）
• 当用户选择某个选项时，系统会把这个选项的编号（value）存入答案存储位置（v-model）

复选框

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

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。

单选按钮

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

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

选择器选项

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

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

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