vue.js框架快速入门简明教程(五)（表单）

在学习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="http://www.srcmini.com/唐三藏" v-model="checkedNames"> < label for="t">唐三藏< /label>< input type="checkbox" id="s" value="http://www.srcmini.com/孙悟空" v-model="checkedNames"> < label for="s">孙悟空< /label>< input type="checkbox" id="n" value="http://www.srcmini.com/牛魔王" v-model="checkedNames"> < label for="n">牛魔王< /label>< input type="checkbox" id="zz" value="http://www.srcmini.com/至尊宝" v-model="checkedNames"> < label for="zz">至尊宝< /label>< input type="checkbox" id="z" value="http://www.srcmini.com/猪八戒" v-model="checkedNames"> < label for="z">猪八戒< /label>< input type="checkbox" id="ss" value="http://www.srcmini.com/沙僧" 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="http://www.srcmini.com/男" v-model="picked"> < label for="male">男< /label> < br> < input type="radio" id="famale" value="http://www.srcmini.com/女" 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="http://www.srcmini.com/吴秀才">语文< /option> < option value="http://www.srcmini.com/张松">数学< /option> < option value="http://www.srcmini.com/李世龙">英语< /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); } } })