Vue2中Element UI表单的使用详解

引入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);
           }
        }
    })

效果图:

Vue2中Element UI表单的使用详解_第1张图片

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失去焦点才会实现更新数据
           }
        }
    })

效果图:

Vue2中Element UI表单的使用详解_第2张图片

姓名里的内容失去焦点时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='参数名'

姓名:

效果图:

在这里插入图片描述

成功√

总结

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

你可能感兴趣的:(Vue2中Element UI表单的使用详解)