脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element UI表单的使用

Vue2中Element UI表单的使用详解

 更新时间：2022年03月03日 16:17:21   作者：碰磕  
这篇文章主要为大家详细介绍了Vue2中Element UI表单的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

引入Element UI

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

表单中组件数据的获取

利用v-model双向绑定

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="用户名:">
            <el-input v-model="uname"></el-input>
            </el-form-item>
            <!-- 单选框 -->
            <el-form-item label="性别">
                <el-radio-group v-model="usex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 复选框 -->
            <el-form-item label="爱好">
            <el-checkbox-group v-model="like">
                <el-checkbox label="吃饭" name="type"></el-checkbox>
                <el-checkbox label="睡觉" name="type"></el-checkbox>
                <el-checkbox label="玩游戏" name="type"></el-checkbox>
                <el-checkbox label="打豆豆" name="type"></el-checkbox>
            </el-checkbox-group>
            </el-form-item>
        <!-- 下拉框 -->
            <el-form-item label="职业">
                <el-select v-model="job" multiple placeholder="请选择您的工作"> <!--myltiple表示可多选-->
                <el-option label="软件工程师" value="软件工程师"></el-option>
                <el-option label="前端开发者" value="前端开发者"></el-option>
                <el-option label="UI设计师" value="UI设计师"></el-option>
                <el-option label="视频剪辑师" value="视频剪辑师"></el-option>
                </el-select>
            </el-form-item>
<!-- 多行文本框 -->
            <el-form-item label="简介">
                <el-input type="textarea" v-model="desc"></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login">立即创建</el-button>
            <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

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

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

实例

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="年龄:">
            <el-input v-model.number="age"></el-input>
            </el-form-item>
            <h1>{{stname}}</h1>
            <!-- 文本框 -->
            姓名:<input v-model.lazy="stname" v-colors="msg" v-autofocus />
<!-- 多行文本框 -->
            <el-form-item label="地址">
                <el-input type="textarea" v-model.trim="address" ></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login" v-color="msg">立即创建</el-button>
            <el-button >取消</el-button>
            </el-form-item>
        </el-form>
    </div>

  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

姓名:<input v-model.lazy="stname" 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='参数名'

姓名:<input v-model.lazy="stname" v-color="msg" />

效果图:

在这里插入图片描述

字体变颜色了…

局部指令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='参数名'

姓名:<input v-model.lazy="stname" v-colors="msg" />

效果图:

在这里插入图片描述

成功√

总结

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

您可能感兴趣的文章:

相关文章

  • vue中destroyed方法及使用示例讲解

    vue中destroyed方法及使用示例讲解

    这篇文章主要为大家介绍了vue中destroyed方法及使用示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue中watch和computed为什么能监听到数据的改变以及不同之处

    vue中watch和computed为什么能监听到数据的改变以及不同之处

    这篇文章主要介绍了vue中watch和computed为什么能监听到数据的改变以及不同之处,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • vue二级路由设置方法

    vue二级路由设置方法

    下面小编就为大家分享一篇vue二级路由设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vuex的实战使用详解

    Vuex的实战使用详解

    这篇文章主要介绍了Vuex的实战使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue3中watchEffect和watch的基础应用详解

    Vue3中watchEffect和watch的基础应用详解

    watch是一个侦听器，默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数，watchEffect是会自动收集函数里面变量的响应式依赖，本文主要来讲讲二者的区别，感兴趣的可以了解一下
    2023-07-07
  • vue中实现图片和文件上传的示例代码

    vue中实现图片和文件上传的示例代码

    下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue实现文本展开收起功能

    Vue实现文本展开收起功能

    这篇文章主要为大家详细介绍了Vue实现文本展开收起功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3图片剪裁插件vue-img-cutter使用小结

    vue3图片剪裁插件vue-img-cutter使用小结

    Vue.js是一款流行的JavaScript前端框架,很受用户喜爱,这篇文章主要介绍了vue3图片剪裁插件vue-img-cutter使用小结,本文结合示例代码讲解的非常详细,感兴趣的朋友一起看看吧
    2024-01-01
  • vue3中ts语法使用element plus分页组件警告错误问题

    vue3中ts语法使用element plus分页组件警告错误问题

    这篇文章主要介绍了vue3中ts语法使用element plus分页组件警告错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue动态添加行/删除行的完整代码示例

    vue动态添加行/删除行的完整代码示例

    在开发中我们常常会碰到这种业务,有一些数据需要在前端进行删除,这篇文章主要给大家介绍了关于vue动态添加行/删除行的相关资料,需要的朋友可以参考下
    2024-02-02

最新评论