我们在用Vue封装好的表单时，是非常方便的，下面我们一起来看看Vue表单实现原理，像这种问题，我们面试偶然也会遇到。
// 首先让我们了解一下表单的几种类型
// 1。 input[text/color/password/email]
// 2。 textarea
// 3。 input[file] 文件上传，直接上传
// 4。 input[checkbox/radio]
// 5。 select
// 首先我们理解Vue中的表单，我们要着重理解一下v-model
// <1>对普通的文本框来讲 v-model = :value + @input 代码如下：
// 这里不用v-model 的写法
<input text="text" :value="name " @input="name = $event.target.value"/>
// 用v-model 的写法
<input text="text" v-model="name"/> // 这样看，vue让我开发少些了很多代码，这样看不明显，下面的例子应更能体现
// <2>对radio和checkbox来讲 v-model = :checked + @change,这里分为单选按和多选按钮
// 单选代码如下：
// 这里不用v-model 的写法
genderArr: [
{ id: 1, label: '男', value: 1 },
{ id: 2, label: '女', value: 2 },
{ id: 3, label: '保密', value: 3 }
]
gender: 1
<span v-for="item in genderArr">
<input
type="radio"
:value="item.value"
:checked = "gender===item.value"
@change="gender===parseIn($event.target.vlue)"
/>
<span v-text='item.label'></span>
</span>
// 用v-model 的写法
<span item in genderArr>
<input type="radio" :value="item.value" v-model="gender" />
<span v-text='item.label'></span>
</span>
// 多选代码如下：
favArr: [
{ id: 1, label:'足球', value: 'football' },
{ id: 2, label:'篮球', value: 'basketball' },
{ id: 3, label:'乒乓球', value: 'pingbang' },
{ id: 4, label:'跑步', value: 'run' },
{ id: 5, label:'编程', value: 'coding' }
],
favCbArr: [],
// 这里不用v-model 的写法
<span v-for="item in favArr">
<input
type="radio"
:value="item.value"
:checked='favCbArr.includes(item.value)'
@change='$event.target.checked ? favCbArr.push(item.value) : favCbArr=favCbArr.filter(e=>e!==item.value)'
/>
<span v-text='item.label'></span>
</span>
// 用v-model 的写法
<span v-for='item in favArr'>
<input
type="checkbox"
v-model='favCbArr'
:value='item.value'
/>
<span v-text='item.label'></span>
</span>
