vue v-model 表单实践

89 阅读2分钟

解决了什么问题

Vue.js 的 v-model 指令解决了在表单元素(如输入框、单选框、复选框等)和 Vue.js 组件之间双向绑定的问题。

使用 v-model 可以将表单元素的值与 Vue.js 实例的数据进行绑定,从而实现数据的双向绑定。

这样,当表单元素的值发生变化时,Vue.js 实例中对应的数据也会随之变化;反之,当 Vue.js 实例中对应的数据发生变化时,表单元素的值也会随之变化。这样,我们就不需要手动监听表单元素的 input 事件,然后将表单元素的值赋值给 Vue.js 实例中对应的数据,也不需要手动监听 Vue.js 实例数据的变化,然后将数据的值赋值给表单元素。

doc:组件 v-model | Vue.js (vuejs.org)

model 的本质

vue model 的本质是一个语法糖,使你不需要绑定元素值,和监听事件


  <div class="form-item">
        <label>密码</label>
        <input
          type="password"
          :value="formData.loginPwd"
          @input="formData.loginPwd=$event.target.value"
        />
</div>

// 使用Model
  <div class="form-item">
        <label>密码</label>
        <input
          type="password"
          v-model="formData.loginPwd"
        />
</div>

效果图

image.png 左边:表单 右边:绑定数据源

checkbox radio 元素的绑定

checkbox 当元素的value 存在v-model里面就会被选择,否则为不选择

  <div class="form-item">
        <label>爱好</label>
        <label>
          <input type="checkbox" value="sports" v-model="formData.loves" />
          运动
        </label>
        <label>
          <input type="checkbox" value="movie" v-model="formData.loves" />
          电影
        </label>
        <label>
          <input type="checkbox" value="music" v-model="formData.loves" />
          音乐
        </label>
        <label>
          <input type="checkbox" value="other" v-model="formData.loves" />
          其他
        </label>
      </div>

radio同理, 这里radio 都没有设设置name ,但是它们是互斥的,因为当value等于v-model时就会被选择

 <div class="form-item">
        性别:
        <label>
          <input type="radio" v-model="formData.sex" value="male" /></label>
        <label>
          <input type="radio" v-model="formData.sex" value="female" /></label>
      </div>

修饰符

v-model 指令提供了一些修饰符,它们可以用来改变双向绑定的行为。下面是三个常用的修饰符:

  • .lazy 修饰符

    默认情况下,v-model 指令在每次输入事件触发时将表单元素的值同步到 Vue.js 实例中对应的数据。而使用 .lazy 修饰符可以将同步的时机改为表单元素失去焦点时。这样可以避免过多的更新操作,提高性能。

<input v-model.lazy="message">
  • .number 修饰符

    默认情况下,v-model 指令将表单元素的值作为字符串进行绑定。而使用 .number 修饰符可以将绑定的值转换为数字类型。

<input v-model.number="age" type="number">
  • .trim 修饰符

    默认情况下,v-model 指令不会对表单元素的值进行修饰。而使用 .trim 修饰符可以将绑定的值去除首尾空格。

<input v-model.trim="username">