Vue表单与v-model

表单输入绑定 — Vue.js (vuejs.org)
官方的文档已经很详细了，现在主要记录一下基本常用用法。

1. 表单输入绑定的基本用法

在Vue中我们可以使用v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
1.使用文本
显示输入的文本，点击按钮可以设置里面的文本并显示出来。

    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <p><button @click="message= 'akane'">send message to akane</button></p>

2.多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

3.使用复选框
单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
    <label>
      <input type="checkbox" v-model="x">
      <span>x:{{ x }}</span>
    </label>

多个复选框，绑定到同一个数组：

  <div id="app">
    爱好是：{{ x }}
    <label>
      <input name="want" type="checkbox" v-model="x" :value="1">
      <span>游泳</span>
    </label>
    <label>
      <input name="want" type="checkbox" v-model="x" :value="2">
      <span>唱歌</span>
    </label>
    <label>
      <input name="want" type="checkbox" v-model="x" :value="3">
      <span>跳舞</span>
    </label>
  </div>

复选框

三选一

加上 name 之后，如果是相同的 name ，就会被分为同一组来进行三选一。
使用value 只能取到字符串，比如："1"、"2"、"3":，:value意思是绑定了value，可以取到内部值，比如1、2、3。

4.使用下拉框
单选时

<template>
  <div id="app">
    你想要： {{ x }}
    <select v-model="x">
      <option value="">-</option>
      <option v-for="item in array" :value="item.value" :key="item.value">
      {{ item.text }}
      </option>
    </select>
  </div>
</template>
export default {
  name: 'App',
  data() {
    return {
      array: [
        {text:"游泳", value:1},
        {text:"唱歌", value:2},
        {text:"跳舞", value:3},
      ]
    }
  },
}
</script>

多选时（配合ctrl和alt键选择），绑定到一个数组：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

值绑定问题
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。
5.form表单创建登录

<template>
  <div id="app">
    登录
    <form @submit.prevent="onSubmit">
      <label>
        <span>用户名</span>
        <input type="text" v-model="user.username">
      </label>
      <label>
        <span>密码</span>
        <input type="password" v-model="user.password">
      </label>
      <button type="submit">登录</button>
    </form>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    }
  },
  methods:{
    onSubmit(){
      console.log(this.user)
    }
  },
}
</script>

使用form标签回车会自动刷新，如果不想这样，想储存数据可以阻止form的submit事件

v-model 默认监听

input 事件，键盘、鼠标、其他任何输入设备的输入
change 事件，只在 input 失去焦点时触发

2.修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

通过上面表单的例子，可以在。user.name 前面的 v-model 前加 .lazy，这样可以在用户点击别处时才储存数据。

<template>
  <div id="app">
    登录
    <form>
      <label>
        <span>用户名</span>
        <input type="text" v-model.lazy="user.username">
      </label>
      <label>
        <span>密码</span>
        <input type="password" v-model="user.password">
      </label>
      <button>登录</button>
    </form>
  </div>
</template>

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
一般使用的话，可以先先取字符串，然后再进行 parseInt()处理，取出数字。

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

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

3. 自定义组件的 v-model

3.1 原理

实际上 v-model 是 v-bind 和 v-on 的语法糖。
v-model 可以绑定一个变量，当变量变化时会更新页面，用户改变页面数据时，变量也会变化。
v-model 默认 @input 输入的是元素。

<input type="text" :value="user.username" @input="user.username=$event.target.value">
<!-- 等价与 -->
<input type="text" v-model="user.username">

5.自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    />
  `
})

现在在这个组件上使用 v-model 的时候：这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
注意：此时仍然需要在组件的 props选项声明 checked 这个prop。

4.Vue配合使用 Ant Design of Vue

官方文档：https://2x.antdv.com/components/form-cn