VUE表单输入绑定

以前对于表单还不是很了解，看了之后发现表单这个东西真是很神奇，哈哈哈
首先是表单的基础用法，就是用input标签加上v-module实现一个实时的动态改变：

<input v-model="message">
<p>Message is: {{ message }}</p>

然后就开始有意思了 ， vue让复选框的实现变得非常简单：

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

这样一个简单的语句，就可以实现一个基础的复选框。
在复选框的实现上，是input标签与 label标签相互配合的！
多个勾选☑️框绑定到同一个数组：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

{{}}里的值与input标签的value保持一致。

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

可以自己实现一下或者官网看一下效果，会比较好理解。
单选按钮表单实现就是将上方input的type值变为”radio”。
单选列表的实现：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

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

多列表在<select>标签中加入multiple属性。
动态选项：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

将数据写在data里，用v-for渲染。
以上的value值都是静态的值，如果我们想要动态的添加value值，使用v-bind：就可以。
复选框：

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

其中a和b的值需要在data中定义！
修饰符：

.lazy(转变为在change事件同步)
.number(转为数字类型)
.trim(过滤空格)