表单绑定v-model

表单绑定v-model

v-model的引入

• 表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。
• Vue中使用v-modle可以实现表单元素与数据的双向绑定

什么叫双向绑定?

• 在为文本框绑定v-model属性后，在文本框中输入的任意内容都会的传递给message，message随之发生改变；而手动的改变message也会同时改变文本框中的内容

<p>文本内容是：{{message}}</p>
<input type="text" v-model="message" />

data: {
    message: 'Hello'
}

v-bind实际上是一个语法糖，它的背后本质上包含了两个操作：

• 以上面文本框为例：
  • v-bind绑定一个value属性，此时value值等于message
  • v-on指令给当前元素绑定input事件，此时message等于value值

<input type="text" v-model="message">
等同于
<!-- $event.target.value：触发事件目标的值，本例中即为文本框中的value值。将value值赋给message，此时message=value，动态绑定value，此时value=message，二者之间构成一个双向绑定 -->
<input type="text" :value="message" @input="message = $event.target.value">

• v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

v-model：radio

<div>
    <label for="male">男</label>
    <input type="radio" id="male" value="男" v-model="sex">
</div>
<div>
    <label for="female">女</label>
    <input type="radio" id="female" value="女" v-model="sex">
</div>
<h2>您的性别是：{{sex}}</h2>

data: {
    sex: '男'
}

[radio按钮说明]：radio按钮由于默认value为空，因此须分别设置value值，由于v-model绑定的都是sex，因此两个radio按钮已经互斥，不需要再添加name值互斥

v-model：checkbox

• checkbox 分为单选框和单选框

①单选框

• 单选框对应一个布尔值

  <label for="agree">
      <input type="checkbox" id="agree" value="" v-model="isAgree" />同意协议
  </label>
  

  data: {
      isAgree: false
  }
  

②多选框

• 多选框对应一个数组

  <input type="checkbox" value="篮球" v-model="hobbies" />篮球
  <input type="checkbox" value="足球" v-model="hobbies" />足球
  <input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
  <h2>选择你的爱好：{{hobbies}}</h2>
  

  data: {
      hobbies: []
  }
  

v-model：select

• select同样也分为单选和多选

①单选

• v-model绑定的是一个值。当我们选中选项中的一个时，它就会将对应的value赋值给fruit

  <select name="fruits" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="梨子">梨子</option>
      <option value="荔枝">荔枝</option>
  </select>
  <h2>您选择的水果是：{{fruit}}</h2>
  

  data: {
      fruit: '香蕉'
  }
  

②多选

• v-model绑定的是一个数组。当选中多个值时，就会将对应的value都添加进数组

  // 多选极为少见，不做介绍
  

v-model修饰符

①.lazy

• 默认情况下，v-model是在input事件中同步输入框的数据的，也就是说，一旦数据发生改变，data中对应的数据就会同步发生改变

• lazy修饰符的作用就是让数据在失去焦点或按下回车时才会更新

  <input type="text" v-model.lazy="message" />
  

②.number

• 默认情况下，无论我们在输入框中输入的是字母还是数字，都会被当作字符串处理

• number修饰符的作用就是让输入框中的内容自动转换为数字类型

  <input type="number" v-model.number="message" />
  

③.trim

• 如果输入内容的首尾有空格，通常情况下，我们希望将去除

• trim修饰符的作用就是自动去除首尾空格

  <input type="text" v-model.trim="message" />
  

[修饰符组合使用]: 修饰符都是可以组合使用的，如<input type="number" v-model.number.lazy="message" />