v-model指令用于各种不同类型的输入包含文本框、文本域、单选按钮、复选框和下拉框表单元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

1、文本类型的 input 和 textarea 元素会绑定 value property 并侦听 input 事件；

2、类型为 checkbox 和 radio 会绑定 checked property 并侦听 change 事件；

3、select 会绑定 value property 并侦听 change 事件。

基本用法

文本

示例：

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

多行文本

示例：

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

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

单选按钮

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

选择器

1、单个选择器。

示例：

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

2、多选 (值绑定到一个数组)。

示例：

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

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

3、选择器的选项可以使用 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>

修饰符

.lazy

lazy 修饰符来改为在每次 change 事件后更新数据。

示例：

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number

number 修饰符是输入自动转换为数字。

示例：

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

.trim

默认自动去除用户输入内容中两端的空格。

示例：

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

组件上的 v-model

Vue 构建具有自定义行为的可复用输入组件，并且这些输入组件也支持 v-model