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="唐三藏" 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操作，越学越想用，希望这篇文章可以帮到你。