Vue 表单输入绑定（3）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. v-model 的值绑定

• 目前我们在前面的案例中 v-model 绑定的大部分的值都是在 template 中固定好的：

  • 比如 hobbies 的三个输入框的值 basketball、football 和 volleyball；
  • 比如 gender 的两个输入框的值 male 和 female；

• 但在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到 data 返回的对象中，再通过 v-bind 来进行值的动态绑定，这个过程就是值绑定。

  • 其实就是 v-bind 的使用过程，比如：

    <span>部门：</span>
    <select v-model="dept">
      <option v-for="dept in depts" :value="dept.value">{{ dept.name }}</option>
    </select>
    <h2>dept: {{ dept }}</h2>
    

    data() {
      return {
        depts: [
          { value: 1, name: '综合管理部' },
          { value: 2, name: '项目研发部' },
          { value: 3, name: '市场部' },
          { value: 4, name: '市场运营部' },
          { value: 5, name: '品牌策划部' },
        ],
        dept: 1
      }
    }
    

2. v-model 的修饰符

v-model 有 3 个修饰符：.lazy、.number、.trim。

2.1 .lazy

.lazy 修饰符有什么作用呢？

默认情况下，v-model 在进行双向绑定时，绑定的是 input 事件，所以会在每次内容输入后就将最新的值和绑定的属性进行同步；而如果我们在 v-model 后加上 lazy 修饰符，就会将绑定的事件切换为 change 事件，只有在元素的值被更改并提交时（比如回车）才会触发。

🙌🌰（举个栗子）：

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

所以如果上面的例子中 v-model 后面没有 .lazy，效果是这样的：

而加上 .lazy 之后，效果就变成了这样：

2.2 .number

在讲 number 修饰符之前，我们先来看一下 v-model 绑定后的值是什么类型的：

<template id="my-app">
  <input type="text" v-model="message">
  <h2>{{ message }}</h2>
  <button @click="showType">查看类型</button>
</template>

const App = {
  data() {
    return {
      message: 100
    }
  },
  methods: {
    showType() {
      console.log(this.message, typeof this.message);
    }
  },
  template: '#my-app'
};

页面效果如下：

可以看到，默认情况下，上面代码中 v-model 绑定的 message 属性虽然初始值是 number 类型，但 message 属性一旦被重新赋值后，就会自动转换为 string 类型，即便我们输入的是数字。

那能不能把它变成 number 类型呢？你可能会想通过将 <input> 的 type 设置为 number 来实现，但很遗憾，这样做实现不了。那该怎么做呢？这时我们就可以使用 number 修饰符了：

<input type="text" v-model.number="message">

效果如下：

可见，给 v-model 添加 number 修饰符后，就会自动将用户输入的值转为数值类型，具体是怎么实现的呢？其实，Vue 内部是通过 JS 的 parseFloat() 函数来进行转换的：

如果 parseFloat() 函数返回结果是 NaN，即用户输入的值不能被转换为数值，则会返回原始值。

2.3 .trim

在开发中，用户输入内容的开头和结尾的空格我们通常是不需要的，也就是说如果要自动过滤用户输入的首尾空白字符，我们可以给 v-model 添加 trim 修饰符：

<!-- .trim 去除开头和结尾的空格 -->
<input type="text" v-model.trim="message">

3. v-model 在组件上使用

v-model 也可以在组件上使用，需要注意的是，Vue2 和 Vue3 版本有一些区别。具体的使用方法，我们后面讲组件化开发时再讲。