一、form表单操作

1 基于表单的基本操作

input单行文本（绑定一个数据即可）

textarea多行文本（绑定一个数据即可）

<input type="text" v-model="name">
<textarea v-model="textArea"></textarea>

radio单选框（绑定同一个数据）

<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>

checkbox多选框（绑定统一个数据（数组形式））

<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">写代码</label>

select下拉框（select绑定一个数据即可，下拉多选select添加multiple=“true”，绑定一个数组数据）

<span>职业：</span>
<!-- select绑定一个数据 -->
<select v-model="job"><option value="0">请选择职业..</option><option value="1">教师</option><option value="2">软件工程师</option><option value="3">律师</option>
</select>
<span>职业多选：</span>
<!-- multiple="true"设置select多选，select绑定一个数组 -->
<select v-model="job2" multiple="true"><option value="0">请选择职业..</option><option value="1">教师</option><option value="2">软件工程师</option><option value="3">律师</option>
</select>

完整例子：

<div id="app"><div><span>姓名：</span><!-- input绑定一个数据 --><input type="text" v-model="name"></div><div><span>性别：</span><!-- input绑定一个数据 --><input type="radio" id="male" value="1" v-model="gender"><label for="male">男</label><input type="radio" id="female" value="2" v-model="gender"><label for="female">女</label></div><div><span>爱好：</span><!-- input绑定一个数组 --><input type="checkbox" id="ball" value="1" v-model="like"><label for="ball">篮球</label><input type="checkbox" id="sing" value="2" v-model="like"><label for="sing">唱歌</label><input type="checkbox" id="code" value="3" v-model="like"><label for="code">写代码</label></div><div><span>职业：</span><!-- select绑定一个数据 --><select v-model="job"><option value="0">请选择职业..</option><option value="1">教师</option><option value="2">软件工程师</option><option value="3">律师</option></select><span>职业多选：</span><!-- multiple="true"设置select多选，select绑定一个数组 --><select v-model="job2" multiple="true"><option value="0">请选择职业..</option><option value="1">教师</option><option value="2">软件工程师</option><option value="3">律师</option></select></div><div><span>个人介绍：</span><!-- textarea绑定一个数据 --><textarea v-model="textArea"></textarea></div><button @click="handel">提交</button>
</div>
<script>var vue = new Vue({el:"#app",data:{name:"",gender:"",like:[],job:"0",job2:[],textArea:""},methods:{handel:function () {alert(this.name+""+this.gender+""+this.like+""+this.job+""+this.job2+""+this.textArea);}}})
</script>

表单域修饰符

.number ：使得输入的数据转化为数值

<input type="text" v-model.number="num2">

<div id="app"><div><input type="text" v-model="num1"><button @click="handel">+13</button>{{num1}}</div><div><input type="text" v-model.number="num2"><button @click="handel2">+13</button>{{num2}}</div>
</div>
<script>var vue = new Vue({el:"#app",data:{num1:'',num2:'',},methods:{handel:function () {this.num1 = this.num1 +13;},handel2:function () {this.num2 = this.num2 +13;}}})
</script>

.trim：去掉开始和结尾的空格

<div id="app"><div><input type="text" v-model="num1">"{{num1}}"</div><div><input type="text" v-model.trim="num2">"{{num2}}"</div>
</div>
<script>var vue = new Vue({el:"#app",data:{num1:'',num2:'',}})
</script>

.lazy：将input事件切换为chenge事件(绑定的数据不会随时变化，会等到你的鼠标焦点离开输入框同步数据)

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

<div id="app"><div><input type="text" v-model="num1">"{{num1}}"</div><div><input type="text" v-model.lazy="num2">"{{num2}}"</div>
</div>
<script>var vue = new Vue({el:"#app",data:{num1:'',num2:'',}})
</script>