首页 > 编程笔记 > JavaScript笔记 阅读：4

Vue v-model的用法（非常详细，附带实例）

在项目开发中，表单是常见的页面效果。我们常常需要让表单输入框根据 JavaScript 中的变量数据来实现动态显示，同时需要将用户输入的数据实时同步到 JavaScript 变量中。

在 Vue 中，比较原始的做法是给输入框绑定动态 value 属性和 input 监听来实现，语法格式如下： 
<input :value="msg" @input="msg = $event.target.value">
其实可以通过 v-model 指令来简化代码，具体如下： 
<input v-model="msg">
使用这种方式，输入框可以根据 msg 初始化动态显示和更新动态显示。同时用户在输入时，输入的数据会自动保存到 msg 上。这就是双向数据绑定的效果。

下面具体讲解使用 v-model 指令收集表单数据的相关内容。

Vue v-model指令的用法

v-model 指令可应用在各种不同类型的表单输入元素上，包括 input、textarea、select。

它会根据所应用的元素的不同，自动扩展到不同的 DOM 属性和事件监听上。下面列举了 3 种情况：
下面通过一个案例来演示使用 v-model 指令收集用户注册表单的各种数据的方法，如下图所示：


该表单页面中共有 8 个表单输入元素，其中账号、密码和年龄为输入框，性别为单选按钮，爱好、阅读并接受《用户协议》为复选框，所属校区为下拉列表，其他信息为文本框。

读者可以尝试写出实现代码，或者整理出大体思路，再对照下方实现代码进行学习。如果思路不清晰，可以先对下方代码进行阅读思考，再独立写出实现代码。当然，下面也会给出分析和说明，以帮助读者更好地理解本案例。

如图 1 所示的表单页面及其功能的完整实现代码如下，Vue 代码如下： 
<div id="app">
  <form @submit.prevent="confirm">
    账号：<input type="text" v-model="userInfo.account"> <br><br/>
    密码：<input type="password" v-model="userInfo.password"> <br><br/>
    年龄：<input type="number" v-model="userInfo.age"> <br><br/>
    性别：
    男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> <br><br/>
    女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br><br/>
    爱好：
    学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    旅行<input type="checkbox" v-model="userInfo.hobby" value="eat">
    <br><br/>
    所属校区：
    <select v-model="userInfo.city">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">武汉</option>
    </select>
    <br><br/>
    其他信息：
    <textarea v-model="userInfo.other"></textarea> <br><br/>
    <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://c.biancheng.net">《用户协议》</a><br><br/>
    <button>提交</button>
  </form>
  <div>预览：{{userInfo}}</div>
</div>

JavaScript 代码如下： 
const { createApp } = Vue

createApp({
  data () {
    return {
      userInfo: {
        account: '',
        password: '',
        age: 18,
        sex: 'female',
        hobby: ['study'],
        city: 'beijing',
        other: '',
        agree: false
      }
    }
  },
  methods: {
    confirm () {
      alert('提交注册请求 用户信息: ' + JSON.stringify(this.userInfo))
    }
  }
}).mount('#app')
在这个案例中，我们利用 v-model 指令收集 input、textarea 和 select 表单元素的数据。

这里有几点需要注意：
1) 如果我们想将多个表单元素输入数据收集到一个单独的对象 userInfo 中，那么 v-model 指令指定的表达式必须是 userInfo.xxx，而 xxx 则需要是对象 userInfo 中的某个已有的属性名，用来存储当前表单元素输入数据。

2) 具有多个 radio 的单选按钮，必须指定用于收集的不同 value 属性，否则效果完全不正确。

值得一提的是，如果 v-model 指令指定的是同一个表达式 userInfo.sex，则收集的是被选中的某个 radio 的 value 属性。如果初始想选中某个 radio，则需要让 sex 的初始值为被选中 radio 的 value 属性。

3) 具有多个 checkbox 的复选框，需要指定用于收集的不同 value 属性。与单选按钮类似，v-model 指令指定的也是同一个表达式 userInfo.hobby，收集到的是所有被选中 checkbox 的 value 属性组成的数组。如果初始想选中某个 checkbox，则 hobby 数组的初始值需要包含其 value 属性。

4) 具有单个 checkbox 的复选框，不需要指定 value 属性，v-model 指令收集的是布尔值，具体地说，当被选中时为 true，反之为 false。

5) select 上的 v-model 指令用于收集被选中的 option 的 value 属性。

6) 表单提交监听需要绑定在 form 标签上，同时需要通过 .prevent 事件修饰符来阻止表单自动提交。

7) 案例中的点击按钮 @submit.prevent="confirm"，在 confirm 回调中调用发送注册的 AJAX 请求。

Vue v-model指令修饰符

Vue 为 v-model 指令提供了相关的指令修饰符，用于满足特定场景的需求，基本语法为“v-model.指令修饰符名”。

下面就来学习 v-model 指令相关的 3 个指令修饰符。

1) .lazy

在默认情况下，绑定 v-model 指令的输入框在用户输入过程中，会自动将输入数据实时同步到 data 的对应属性上。而加上 .lazy 修饰符后，在用户输入过程中输入数据不会被实时同步到对应属性上，只有当输入框失去焦点时输入数据才会被同步。

事实上，在不添加 .lazy 修饰符时，内部绑定的是 input 事件，而添加 .lazy 修饰符后，内部绑定的是 change 事件。input 事件在输入过程中触发，而 change 事件在输入数据被修改且输入框失去焦点后触发。

2) .trim

在默认情况下，输入文本两端的空格会被同步到 data 的对应属性上，如果手动去除这些空格，对于开发者来说会比较麻烦，此时可以直接通过 .trim 修饰符将文本两端的空格自动去除后，再同步到 data 的对应属性上。

3) .number

在默认情况下，一个非 number 类型的输入框收集的都是文本字符串，即便输入的内容是数值，也会被转换为数值字符串。通过 .number 修饰符可以在输入的是纯数值文本，或者前面部分是数值文本的情况下，将数据自动转换为数值后再同步到 data 的对应属性上。

如果前面部分不是数值文本，则会直接将文本字符串同步到 data 的对应属性上。

下面通过一个综合案例来演示上面 3 种指令修饰符的使用方法，Vue 代码如下： 
<div id="app">
  <form @submit.prevent="confirm">
    账号1：<input type="text" v-model.lazy="userInfo.account1"> <br/><br/>
    账号2：<input type="text" v-model.trim="userInfo.account2"> <br/><br/>
    账号3：<input type="text" v-model.number="userInfo.account3"> <br/><br/>
    <button>提交</button>
  </form>
  <div>预览：{{userInfo}}</div>
</div>

JavaScript 代码如下： 
const { createApp } = Vue

createApp({
  data () {
    return {
      userInfo: {
        account1: '',
        account2: '',
        account3: ''
      }
    }
  },
  methods: {
    confirm () {
      alert('提交注册请求 用户信息: ' + JSON.stringify(this.userInfo))
    }
  }
}).mount('#app')
运行代码后，在账号 1 对应的输入框中输入数据时，输入过程中，account1 不会发生变化，只有在输入框失去焦点后，才变化为输入框中输入的数据。

在账号 2 对应的输入框中输入文本并在其左右输入空格时，account2 不会发生变化；在输入框失去焦点后，输入框中输入的空格自动消失。

在账号 3 对应的输入框中输入 6 时，account3 的值为数值 6；在输入 67a 时，account3 的值为数值 67；但在输入 a6 时，account3 的值为字符串 a6。

相关文章