Vue收集表单数据和三个修饰符（lazy、number、trim）

一、Vue收集表单数据

1. 单个表单元素：

如果你只需要获取单个表单元素的值，可以使用v-model指令将表单元素的值绑定到Vue实例的一个属性上。例如：

<input type="text" v-model="name">

然后在Vue实例中，你就可以通过this.name来获取输入框的值。

2. 多个表单元素：

如果你需要获取多个表单元素的值，可以使用表单的submit事件来处理。在表单元素上添加@submit事件监听器，并在Vue实例中定义一个方法来处理提交事件。例如：

<form @submit="handleSubmit">
  <input type="text" v-model="name">
  <input type="email" v-model="email">
  <button type="submit">Submit</button>
</form>

new Vue({
  data: {
    name: '',
    email: '',
  },
  methods: {
    handleSubmit() {
      console.log(this.name, this.email);
    }
  }
});

 在上面的例子中，当用户提交表单时，handleSubmit方法会被调用，你可以在该方法中访问表单元素的值。

3. 动态表单元素

如果你的表单元素是动态生成的，你可以使用Vue的响应式数据来存储表单数据。在Vue实例中定义一个空的对象或数组来存储表单数据，然后使用v-model指令将表单元素的值绑定到对应的数据属性上。例如：

<div v-for="(item, index) in formItems" :key="index">
  <input type="text" v-model="item.value">
</div>
<button @click="addFormItem">Add</button>

new Vue({
  data: {
    formItems: []
  },
  methods: {
    addFormItem() {
      this.formItems.push({ value: '' });
    },
    handleSubmit() {
      console.log(this.formItems);
    }
  }
});

4.获取radio表单元素的值

<input type="radio" name="selectSex" value="male" v-model="gender">
<label for="male">Male</label>

<input type="radio" name="selectSex"  value="female" v-model="gender">
<label for="female">Female</label>

<button @click="handleRadio">Get Value</button>

new Vue({
  data: {
    gender: ''
  },
  methods: {
    handleRadio() {
      console.log(this.gender);
    }
  }
});

radio表达要绑定value值，如果要实现单选则绑定相同的name属性。

5.获取checkbox表单元素的值

<input type="checkbox" id="apple" value="Apple" v-model="fruits">
<label for="apple">Apple</label>

<input type="checkbox" id="banana" value="Banana" v-model="fruits">
<label for="banana">Banana</label>

<button @click="handleCheckbox">Get Value</button>

new Vue({
  data: {
    fruits: []
  },
  methods: {
    handleCheckbox() {
      console.log(this.fruits);
    }
  }
});

(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or未勾选，是布尔值)

(2)v-model的初始值是数组，那么收集的的就是value组成的数组
 

6.获取select表单元素的值

<select v-model="selectedFruit">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<button @click="handleSelect">Get Value</button>

new Vue({
  data: {
    selectedFruit: ''
  },
  methods: {
    handleSelect() {
      console.log(this.selectedFruit);
    }
  }
});

7.获取textarea表单元素的值

<textarea v-model="message"></textarea>
<button @click="handleTextarea">Get Value</button>

new Vue({
  data: {
    message: ''
  },
  methods: {
    handleTextarea() {
      console.log(this.message);
    }
  }
});

二、v-model的三个修饰符

当使用 `v-model` 指令在表单输入元素上进行双向绑定时，Vue.js提供了三个修饰符，用于改变默认行为。下面详细介绍这三个修饰符：

1. `.lazy` 修饰符：
   - 默认行为：在输入框的 `input` 事件中，`v-model`会立即更新绑定的数据。
   - 使用 `.lazy` 修饰符后的行为：只有在输入框失去焦点或按下 Enter 键时，绑定的数据才会更新。
   - 示例：

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

2. `.number` 修饰符：
   - 默认行为：`v-model`绑定的值都是字符串类型。
   - 使用 `.number` 修饰符后的行为：输入框的值会自动转换为数字类型。
   - 示例：

<input v-model.number="age" type="number">

3. `.trim` 修饰符：
   - 默认行为：`v-model`会自动去除输入框值的首尾空白字符。
   - 使用 `.trim` 修饰符后的行为：输入框的值会去除所有空白字符，不仅限于首尾。
   - 示例：

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

这些修饰符可以根据实际需求来使用。通过使用修饰符，我们可以更改双向绑定的行为，以适应不同的场景和要求。

三、总结