个性化阅读
专注于IT技术分析

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>
vue表单-01

而且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表单-02

使用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>
vue表单-03

四、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表单-04

五、修饰符

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>
vue表单-05

那有没有.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);
            }
        }
    })
vue表单-06

会把前后的空格都显示出来,这时候.trim修饰符就派上用场了:

<input type="text" v-model.trim="message">
vue表单-07

以上是vue.js的表单教程学习,比起传统的表单处理要简单轻便,后面的修饰符小小一步更是起到辅助作用,极大的减少了DOM操作,越学越想用,希望这篇文章可以帮到你。

赞(0) 打赏
未经允许不得转载:srcmini » vue.js框架快速入门简明教程(五):表单
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏