vue表单处理——结合例子图文详解

 

本来来介绍vue表单元素及数据的绑定处理,结合例子和效果图,更好理解哦。

一.输入框

Vue.js在表单应用上用 v-model 指令在表单控件元素上创建双向数据绑定。在输入的同时就能马上显示结果。 例如:

<input type="text" v-model="msg1">
<p></p>

<textarea name="" id="" cols="30" rows="5" v-model="msg2"></textarea>
<p></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>人/动物: </span>


<script>
    new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    })
</script>

三.单选按钮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>选中值为: </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">
        选择的网站是: 
    </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></p>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message:""
        }
    })
</script>

2、.number

在vue.js中.number修饰符不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型。

<div id="app">
    <input type="text" v-model.number="message">
    <p></p>
    <button @click="assay()">查看输入的类型</button>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message:""
        },
        methods:{
            assay(){
                alert(typeof this.message);
            }
        }
    })
</script>

那有没有.number修饰符有什么区别呢?当没有的时候就算输入的是数字,在javascript类型中还是string的,不信你试下。

3、.trim是用来滤前后的空格。

例如:

<div id="app">
    <input type="text" v-model="message">
    <p></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操作。

更多vue学习请移步及项目应用:

vue中的增加删除修改接口请求数据操作

深入了解vue组件——从注册到使用

VUE框架属性方法图文全解

Element-ui中点击table单元格获取该行数据的id

本文为博主原创文章,知识共享,开源精神,转载注明出处。