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="請(qǐng)選擇您的工作"> <!--myltiple表示可多選--> <el-option label="軟件工程師" value="軟件工程師"></el-option> <el-option label="前端開發(fā)者" value="前端開發(fā)者"></el-option> <el-option label="UI設(shè)計(jì)師" value="UI設(shè)計(jì)師"></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
,它可以表示下拉框多選(實(shí)用)
.prevent
此處用于阻止表單提交
var vm=new Vue({ el:"#app", data:{ uname:"", usex:"男", like:["吃飯","睡覺"], job:["UI設(shè)計(jì)師"], 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 | 失去焦點(diǎn)才會(huì)實(shí)現(xiàn)更新數(shù)據(jù) |
實(shí)例
<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失去焦點(diǎn)才會(huì)實(shí)現(xiàn)更新數(shù)據(jù) } } })
效果圖:
姓名里的內(nèi)容失去焦點(diǎn)時(shí)h1
標(biāo)簽才會(huì)改變對(duì)應(yīng)的內(nèi)容
并且文本域前方后方不允許空格
點(diǎn)擊立即創(chuàng)建
各個(gè)修飾符發(fā)揮了對(duì)應(yīng)的作用
自定義指令
我們通常用官方的指令,有時(shí)候?yàn)榱藵M足自己的需求,可以進(jìn)行自定義指令
分為兩種:
局部指令(關(guān)鍵詞:directives
)、
全局指令(關(guān)鍵詞:directive
)
全局指令directive
此處我綁定一個(gè)默認(rèn)焦點(diǎn)位置的指令
不帶參inserted
Vue.directive('autofocus',{ inserted:function(el){ //el即綁定的元素 el.focus();//JS自帶的焦點(diǎn)方法 } })
使用
v-autofocus
姓名:<input v-model.lazy="stname" v-autofocus />
效果圖:默認(rèn)焦點(diǎn)
帶參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
照樣綁定一個(gè)改變顏色的指令
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)容!
相關(guān)文章
socket io與vue-cli的結(jié)合使用的示例代碼
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對(duì)比(實(shí)例PK ),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01