Vue的双向绑定v-model详细介绍

v-model

1.v-model的基本使用

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

• 比如用户在登录、注册时需要提交账号密码；

• 比如用户在检索、创建、更新信息时，需要提交一些数据；

这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：

• v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

• 它会根据控件类型自动选取正确的方法来更新元素；

• 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

示例代码 :

<div id="app">
  <input type="text" v-model="message" />
  <h2>{{ message }}</h2>
</div>

那么v-model的原理是什么呢?

• 刚刚提到v-本质上不过是语法糖而已, 那么它是什么的语法糖呢?

官方有说到，v-model的原理其实是背后有两个操作：

• v-bind绑定value属性的值；

• v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

例如上面代码我们也可以使用v-bind和v-on完成 :

<div id="app">
  <input type="text" :value="message" @input="changeValue" />
  <h2>{{ message }}</h2>
</div>

由于v-bind和v-on的使用起来很繁琐, 就有了v-model, 所以说v-model是v-bind和v-on的语法糖

2.v-model绑定其他表单

我们再来绑定一下其他的表单类型：textarea、checkbox、radio、select

2.1绑定textarea

我们来看一下绑定textarea：

<div id="app">
  <textarea id="" cols="30" rows="10" v-model="content"></textarea>
  <p>textarea的内容是: {{ content }}</p>
</div>

2.2绑定checkbox

我们来看一下v-model绑定checkbox：单个勾选框和多个勾选框

单个勾选框：

• v-model即为布尔值。

• 此时input的value属性并不影响v-model的值。

<div id="app">
  <!-- 1.单选框 -->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree" /> 同意协议
  </label>
  <!-- 单选框存储到data中的数据默认是一个布尔值 -->
  <h2>单选框的值: {{ isAgree }}</h2>
</div>

多个复选框：

• 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

• 当选中某一个时，就会将input的value添加到数组中, 因此除了绑定v-model之外, 必须明确绑定一个value值。

<!-- 2.多选框 -->
<!-- 多选框除了绑定v-model之外, 必须明确绑定一个value值 -->
<div class="habbies">
  <h2>请选择您的爱好:</h2>
  <label for="sing">
    <input type="checkbox" id="sing" v-model="hobbies" value="sing"/> 唱
  </label>
  <label for="jump">
    <input type="checkbox" id="jump" v-model="hobbies" value="jump"/> 跳
  </label>
  <label for="rap">
    <input type="checkbox" id="rap" v-model="hobbies" value="rap"/> rap
  </label>
  <label for="basketball">
    <input type="checkbox" id="basketball" v-model="hobbies" 
           value="basketball"/> 篮球
  </label>
  <h2>爱好: {{ hobbies }}</h2>
</div>

2.3绑定radio

v-model绑定radio，用于选择其中一项；

• 和刚刚一样, 当选中某一个时，就会将input的value添加到data的数据中, 因此除了绑定v-model之外, 必须明确绑定一个value值
• 在radio加上v-model后, 就不需要加上name也可以做到互斥

<div id="app">
  <label for="male">
    <input type="radio" id="male" v-model="gender" value="male" /> 男
  </label>
  <label for="famale">
    <input type="radio" id="famale" v-model="gender" value="famale" /> 女
  </label>
  <h2>性别是: {{ gender }}</h2>
</div>

2.4绑定select

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

单选：只能选中一个值

• v-model绑定的是一个值；

• 当我们选中option中的一个时，会将它对应的value赋值到fruit中；

<!-- 1.select的单选 -->
<select v-model="fruit">
  <option value="apple">苹果</option>
  <option value="orage">橙子</option>
  <option value="banner">香蕉</option>
</select>
<h2>单选: {{ fruit }}</h2>

多选：可以选中多个值

• v-model绑定的是一个数组；

• 当选中多个值时，就会将选中的option对应的value添加到数组fruit中, 需要明确绑定value；

<!-- 2.select的多选 -->
<select multiple size="3" v-model="fruits">
  <option value="apple">苹果</option>
  <option value="orage">橙子</option>
  <option value="banner">香蕉</option>
</select>
<h2>多选: {{ fruits }}</h2>

3.v-model修饰符

3.1修饰符lazy

lazy修饰符是什么作用呢？

• 默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；

• 如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发；

<div id="app">
  <input type="text" v-model.lazy="message" />
  <h2>{{ message }}</h2>
</div>

3.2修饰符number

我们先来看一下v-model绑定后的值是什么类型的：

• message总是string类型
• 在Vue2中, 即使在我们设置type为number也是string类型, Vue3设置type为number类型会生效；

<div id="app">
  <input type="text" v-model="message" />
  <h2>{{ typeof message }}</h2>
</div>

<div id="app">
  <!-- Vue2中即使设置number也是String类型 -->
  <input type="number" v-model="message" />
  <h2>{{ typeof message }}</h2>
</div>

• 使用number修饰符

<div id="app">
  <input type="text" v-model.number="message" />
  <h2>{{ typeof message }}</h2>
</div>

3.3修饰符trim

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

<div id="app">
	<input type="text" v-model.trim="message" />
</div>

也可以同时使用多个修饰符:

<div id="app">
  <input type="text" v-model.lazy.trim="message" />
</div>