v-model的基本使用

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

  • 比如在登录、注册时需要提交账号密码
  • 比如用户在检索、创建、更新信息时，需要提交一些数据

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

  • v-model指令可以在表单input、textarea以及select元素上创建双向绑定
  • 它会根据控件类型自动选取正确的方法来更新元素

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

    v-model原理

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

  • v-bind绑定value属性的值

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

    1. <input v-model="searchText" />

    等价于

    1. <input :value="searchText" @input="searchText = $event.target.value">

    事实上v-model更加复杂

    v-model的修饰符使用

    lazy

    lazy修饰符是什么作用呢？

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

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

    number

    我们data中的数据可以一开始就赋值为数字类型，但是一旦进行修改，那么就会变成字符串类型，如果希望它一直是数字类型，可以使用number修饰符
    补充：虽然是字符串类型，但是依然可以进行数字类型的运算等操作，是因为js的隐式类型转换

    trim

    去除两边的空格