Vue.js_28_v-model 指令

本系列博客汇总在这里：Vue.js 汇总

---

源码工程文件为：

一、基本使用方法

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。

案例的解析：

当我们在输入框输入内容时，因为 input 中的 v-model 绑定了 message，所以会实时将输入的内容传递给 message，message 发生改变。

当 message 发生改变时，因为上面我们使用 Mustache 语法，将 message 的值插入到 DOM 中，所以 DOM 会发生相应的改变。

所以，通过 v-model 实现了双向的绑定。当然，我们也可以将 v-model 用于 textarea 元素。

v-model 其实是一个语法糖，它的背后本质上是包含两个操作

• v-bind 绑定一个 value 属性
• v-on 指令给当前元素绑定 input 事件

如下

<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

二、结合 radio 类型使用

当存在多个单选框时。

三、结合 checkbox 类型使用

复选框分为两种情况：单个勾选框和多个勾选框。

• 单个勾选框
  v-model 即为布尔值。此时 input 的 value 并不影响 v-model 的值。
• 多个复选框
  当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组。当选中某一个时，就会将 input 的 value 添加到数组中。

值绑定

绑定是动态的给 value 赋值，我们前面的 value 中的值，都是在定义 input 的时候直接给定的。但是真实开发中，这些 input 的值可能是从网络获取或定义在 data 中的。所以我们可以通过 v-bind:value 动态的给 value 绑定值。

四、结合 select 类型使用

和 checkbox 一样，select 也分单选和多选两种情况。

• 单选：只能选中一个值。
  v-model 绑定的是一个值。当我们选中 option 中的一个时，会将它对应的 value 赋值到 mySelect 中
• 多选：可以选中多个值。
  v-model 绑定的是一个数组。当选中多个值时，就会将选中的 option 对应的 value 添加到数组mySelects 中。

五、修饰符

1、lazy 修饰符

默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生改变。lazy 修饰符可以让数据在失去焦点或者回车时才会更新。

2、number 修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number 修饰符可以让在输入框中输入的内容自动转成数字类型。

3、trim 修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除，trim 修饰符可以过滤内容左右两边的空格。

如有错误，欢迎指正！