Vue表单与v-model

1. 表单输入与绑定

在Vue中我们可以使用v-model 指令在表单、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <p>注意：<code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code> 选项中声明初始值。</p> <ol> <li>使用文本</li> </ol> <pre><code class="html"><input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </code></pre> <ol start="2"> <li>多行文本</li> </ol> <pre><code class="html"><span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines">

使用复选框

单个复选框，绑定到布尔值：


{{ checked }}

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


Jack

John

Mike


Checked names: {{ checkedNames }}

new Vue({
  el: '...',
  data: {
    checkedNames: []     // 此处为绑定的数组
  }
})

使用下拉框

单选时


  
  Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

多选时(绑定到一个数组)：


  
  

  Selected: {{ selected }}

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

2.值绑定问题

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

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

3.修饰符

.lazy

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

.number

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

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

4.v-model 原理

实际上 v-model 是 v-bind 和 v-on 的语法糖

v-model 可以绑定一个变量当变量变化时会更新UI 用户改变UI数据时变量也会变化

5.自定义组件的 v-model

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

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    
  `
})

现在在这个组件上使用 v-model 的时候：这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意：此时仍然需要在组件的 props选项声明 checked 这个prop

6.Vue配合使用 Ant Design of Vue

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