Vue2中Element|Vue2中Element UI表单的使用详解 Vue2中ElementUI表单的使用详解

引入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='参数名'