vue v-model 表单实践

解决了什么问题

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>

效果图

左边:表单 右边:绑定数据源

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">