阅读 38

Vue 表单输入绑定(3)

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

1. v-model 的值绑定

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

    • 比如 hobbies 的三个输入框的值 basketballfootballvolleyball
    • 比如 gender 的两个输入框的值 malefemale
  • 但在真实开发中,我们的数据可能是来自服务器的,那么我们就可以先将值请求下来,绑定到 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-model3 个修饰符:.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,效果是这样的:

v-model不加lazy修饰符.gif

而加上 .lazy 之后,效果就变成了这样:

v-model加上lazy修饰符.gif

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不加number修饰符.gif

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

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

<input type="text" v-model.number="message">
复制代码

效果如下:

v-model添加number修饰符.gif

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

image-20211010154224016.png

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

2.3 .trim

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

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

3. v-model 在组件上使用

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

文章分类
前端
文章标签