Vue2中的表单双向数据绑定

目录

一、单行文本

二、多行文本

三、复选框

四、单选框

五、下拉选择框

六、v-model的修饰符

七、注意点

---

Vue2中的表单通过使用v-model实现双向数据绑定

一、单行文本

 v-model收集的是input的value值，需要在data中设置初始值message；

<!-- 单行文本-->
<label for="text">单行文本</label>
<input id="text" type="text" v-model="message">

二、多行文本

v-model收集的是textarea的value值，需要在data中设置初始值messg；

<!-- 多行文本 -->
<label for="textarea">多行文本</label>
<textarea name="" id="textarea" v-model="messg"></textarea>

三、复选框

单个复选框自动收集checked的值true或者false；可以通过checkedVale设置初始值（true/false）

多个复选框收集的是设置的value的值，可以通过checkboxArr数组设置初始值（比如[1]）；

  <!-- 单个复选框 -->
  <label for="checkbox">复选框</label>
  <input id="checkbox" type="checkbox" v-model="checkedVale">
  <br><br><br>


  <!-- 多个复选框 -->
  <label for="checkbox1">数学</label>
  <input id="checkbox1" type="checkbox" value="1" v-model="checkboxArr">
  <label for="checkbox2">语文</label>
  <input id="checkbox2" type="checkbox" value="2" v-model="checkboxArr">
  <label for="checkbox3">化学</label>
  <input id="checkbox3" type="checkbox" value="3" v-model="checkboxArr">
  <label for="checkbox4">物理</label>
  <input id="checkbox4" type="checkbox" value="4" v-model="checkboxArr">
  <br><br><br>

四、单选框

单选框收集的是设置的value的值，可以通过pick设置初始值（比如pick为‘1’）；

v-model能够实现单选框的单选效果（基础js需要通过设置相同的name来实现单选效果）

  <!-- 单选框 -->
  <label>单选框</label>

  <label for="0">去</label>
  <input id="0" type="radio" value="1" v-model="pick">
  <label for="1">不去</label>
  <input id="1" type="radio" value="2" v-model="pick">

五、下拉选择框

通过设置selectValue的值设置初始选中状态。

在使用v-model的同时，在option上使用selected会被v-model覆盖而不生效。

  <br><br><br>
  <!-- 单选框 -->

  <label for="">下拉选择框</label>
  <select v-model="selectValue">
    <option value="1" selected>请选择</option>
    <option value="2">V</option>
    <option value="3">W</option>
    <option value="4">M</option>
  </select>

六、v-model的修饰符

1、.lazy: 发生@input事件时不会更改data中的数据，只有当@change事件触发时才会更改，换言之输入时不更新，回车后更新。

2、.number：当输入的内容为数字时，正常data中保存为字符串类型的数字，使用.number后得到的data中的数据为number类型的。

3、.trim：删除输入内容收尾的空格。

七、注意点

1、v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值，而总是将 Vue 实例的data中的数据作为数据来源。需要通过 JavaScript 在 data 选项中声明初始值。

2、v-model 本质上是语法糖，是绑定值和事件组合生效的结果。

• text 和 textarea 元素使用 value 和 input 事件；
• checkbox 和 radio 使用 checked 和 change 事件；
• select 使用 value 和 change 作为事件。

3、在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。