Vue2中Element?UI表單的使用詳解

更新時間：2022年03月03日 16:17:21 作者：碰磕

這篇文章主要為大家詳細介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

引入Element UI

<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

表單中組件數(shù)據(jù)的獲取

利用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>
            <!-- 復(fù)選框 -->
            <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="職業(yè)">
                <el-select v-model="job" multiple placeholder="請選擇您的工作"> <!--myltiple表示可多選-->
                <el-option label="軟件工程師" value="軟件工程師"></el-option>
                <el-option label="前端開發(fā)者" value="前端開發(fā)者"></el-option>
                <el-option label="UI設(shè)計師" value="UI設(shè)計師"></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">立即創(chuàng)建</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設(shè)計師"],
            desc:"hello,I'm 碰磕"
        },
        methods:{
           login:function(){
                alert("姓名:"+this.uname+",性別:"+this.usex+",愛好:"+this.like+",職業(yè):"+this.job+",簡介:"+this.desc);
           }
        }
    })

效果圖:

在這里插入圖片描述

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

表單中的修飾符

名稱	用途
.number	將類型設(shè)定為number類型
.trim	去除前后空格
.lazy	失去焦點才會實現(xiàn)更新數(shù)據(jù)

實例

<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">立即創(chuàng)建</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將類型設(shè)定為number類型
                console.log(this.address);  //.trim去除前后空格
                console.log(this.stname);   //.lazy失去焦點才會實現(xiàn)更新數(shù)據(jù)
           }
        }
    })

效果圖:

在這里插入圖片描述

姓名里的內(nèi)容失去焦點時h1標簽才會改變對應(yīng)的內(nèi)容

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

點擊立即創(chuàng)建

在這里插入圖片描述

各個修飾符發(fā)揮了對應(yīng)的作用

自定義指令

我們通常用官方的指令,有時候為了滿足自己的需求,可以進行自定義指令

分為兩種:

局部指令(關(guān)鍵詞:directives)、

全局指令(關(guān)鍵詞: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即綁定的參數(shù)
            el.style.color=binding.value.color;
        }
    })
 var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
    })

使用

v-color='參數(shù)名'

姓名:<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='參數(shù)名'

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

效果圖:

在這里插入圖片描述

成功√

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue2中Element?UI表單的使用詳解

目錄

引入Element UI

表單中組件數(shù)據(jù)的獲取

表單中的修飾符

實例

自定義指令

全局指令directive

不帶參inserted

帶參bind

局部指令directives

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具