Vue2中Element UI表单的使用详解

目录

• 引入ElementUI
• 表单中组件数据的获取
• 表单中的修饰符
• 实例
• 自定义指令
• 全局指令directive
• 不带参inserted
• 带参bind
• 局部指令directives
• 总结

引入Element UI

表单中组件数据的获取

利用v-model双向绑定

        
            
            
            
            
            
            
                
                
                
                
            
            
            
            
                
                
                
                
            
            
        
            
                 
                
                
                
                
                
            

            
                
            

            
            立即创建
            取消
            
        
    

代码诠释一切,主要提一下：

multiple,它可以表示下拉框多选(实用)

.prevent此处用于阻止表单提交

var vm=new Vue({
        el:"#app",
        data:{
            uname:"",
            usex:"男",
            like:["吃饭","睡觉"],
            job:["UI设计师"],
            desc:"hello,I'm 碰磕"
        },
        methods:{
           login:function(){
                alert("姓名:"+this.uname+",性别:"+this.usex+",爱好:"+this.like+",职业:"+this.job+",简介:"+this.desc);
           }
        }
    })

效果图:

alert 打印出了所填写的信息…

表单中的修饰符

名称	用途
.number	将类型设定为number类型
.trim	去除前后空格
.lazy	失去焦点才会实现更新数据

实例

        
            
            
            
            
            
{{stname}}
            
            姓名:

            
                
            

            
            立即创建
            取消
            
        
    

  var vm=new Vue({
        el:"#app",
        data:{
            age:"",
            address:"",
            stname:""
        },
        methods:{
           login:function(){
                console.log(this.age+10);   //.number将类型设定为number类型
                console.log(this.address);  //.trim去除前后空格
                console.log(this.stname);   //.lazy失去焦点才会实现更新数据
           }
        }
    })

效果图:

姓名里的内容失去焦点时h1标签才会改变对应的内容

并且文本域前方后方不允许空格

点击立即创建

各个修饰符发挥了对应的作用

自定义指令

我们通常用官方的指令,有时候为了满足自己的需求,可以进行自定义指令

分为两种:

局部指令(关键词:directives)、

全局指令(关键词:directive)

全局指令directive

此处我绑定一个默认焦点位置的指令

不带参inserted

Vue.directive('autofocus',{
        inserted:function(el){
            //el即绑定的元素
            el.focus();//JS自带的焦点方法
        }
})

使用

v-autofocus

姓名:

效果图：默认焦点

带参bind

//带参
    Vue.directive('color',{
        bind:function(el,binding){
            //el即绑定的元素
            //binndding即绑定的参数
            el.style.color=binding.value.color;
        }
    })
 var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
    })

使用

v-color='参数名'

姓名:

效果图:

字体变颜色了…

局部指令directives

照样绑定一个改变颜色的指令

var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
        directives:{
            colors:{
                bind:function(el,binding){
                    el.style.color=binding.value.color;
                }
            }
        }
    })

使用

v-colors='参数名'

姓名:

效果图:

成功√

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!