在学习vue.js表单之前，让我们来回忆一下html是如何处理表单数据的？我们把要提交的值输入input，textarea等表单元素中，提交到后台数据处理后再返回数据显示到页面。整个过程涉及到表单处理和数据输出输入等复杂问题。那vue.js表单会有什么优势呢？文本将会带大家走进vue.js表单。Let’s go!
一、输入框
Vue.js在表单应用上用 v-model 指令在表单控件元素上创建双向数据绑定。在输入的同时就能马上显示结果。
例如：
<input type="text" v-model="msg1">
<p>{{msg1}}</p>
<textarea name="" id="" cols="30" rows="5" v-model="msg2"></textarea>
<p>{{msg2}}</p>
<script>
new Vue({
el: '#app',
data: {
msg1:'',
msg2:'获取数据到元素上显示
'
}
})
</script>
而且v-model 会根据控件类型自动选取正确的方法来更新元素，这是什么意思呢？就是说vue.js会监听到元素的类型，比如能监听到是input输入类型还是复选框等其他表单元素。
二、复选框checkbox
在实际项目中，我们通常要用复选框来表示有多种情况和选择，在学习vue.js表单复选框之前，我们要获取复选框的所有选择时，是用过javascript或者jquary通过DOM处理来获取复选框的值。但在vue.js中处理复选框就变得非常简单，只需要绑定v-model就可以。
例如：是把v-model中绑定的复选框的value值绑定到数组中
<p>下列是去西天取经的有：</p>
<input type="checkbox" id="t" value="唐三藏" v-model="checkedNames">
<label for="t">唐三藏</label>
<input type="checkbox" id="s" value="孙悟空" v-model="checkedNames">
<label for="s">孙悟空</label>
<input type="checkbox" id="n" value="牛魔王" v-model="checkedNames">
<label for="n">牛魔王</label>
<input type="checkbox" id="zz" value="至尊宝" v-model="checkedNames">
<label for="zz">至尊宝</label>
<input type="checkbox" id="z" value="猪八戒" v-model="checkedNames">
<label for="z">猪八戒</label>
<input type="checkbox" id="ss" value="沙僧" v-model="checkedNames">
<label for="ss">沙僧</label>
<br>
<span>人/动物: {{ checkedNames }}</span>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
使用Vue.js几行代码就可以搞定复杂的逻辑复选框问题了，是不是很简单呢?
三、单选按钮radio
单选按钮和复选框是其实是逻辑处理“&&”，“||”的意思，而单选按钮radio是逻辑运算或者的意思，多个只能选择一个，就是选择的按钮的value。以下实例中演示了单选按钮的双向数据绑定：
<div id="app">
<input type="radio" id="male" value="男" v-model="picked">
<label for="male">男</label>
<br>
<input type="radio" id="famale" value="女" v-model="picked">
<label for="famale">女</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
picked:'男'
}
})
</script>
四、Select列表
Vue.js表单中的Select列表其实和单选按钮相似，都是通过数据双向绑定，来选择的选项和显示的value
<div id="app">
<select v-model="selected" name="fruit">
<option value="">查看科目的主教老师</option>
<option value="吴秀才">语文</option>
<option value="张松">数学</option>
<option value="李世龙">英语</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
selected:''
}
})
</script>
五、修饰符
Vue.js的表单中可以插入修饰符，用法和上章说的vue.js框架快速入门简明教程(四)：样式绑定和事件处理器中的修饰符用法一样，通过由点(.)表示的指令后缀来调用修饰符。
表单涉及到的修饰符有三个，分别是 .lazy, .number, .trim
具体用法；
1、.lazy
使用了这个修饰符将会从“input事件”变成change事件进行同步，就是在输入过程中没同步，输入完成之后光标发生变化的时候才同步数据。
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:""
}
})
</script>
你也可以试下哦。
1、.number
在vue.js中.number修饰符不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型。
<div id="app">
<input type="text" v-model.number="message">
<p>{{ message }}</p>
<button @click="assay()">查看输入的类型</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:""
},
methods:{
assay(){
alert(typeof this.message);
}
}
})
</script>
那有没有.number修饰符有什么区别呢？当没有的时候就算输入的是数字，在javascript类型中还是string的，不信你试下。
1、.trim是用来滤前后的空格。
例如：
<div id="app">
<input type="text" v-model="message">
<p>{{ message }}</p>
<button @click="assay()">查看输入的类型</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:""
},
methods:{
assay(){
alert(this.message);
}
}
})
会把前后的空格都显示出来，这时候.trim修饰符就派上用场了：
<input type="text" v-model.trim="message">
以上是vue.js的表单教程学习，比起传统的表单处理要简单轻便，后面的修饰符小小一步更是起到辅助作用，极大的减少了DOM操作，越学越想用，希望这篇文章可以帮到你。
