Vue2中Element?UI表單的使用詳解
更新時(shí)間：2022年03月03日 16:17:21 作者：碰磕
這篇文章主要為大家詳細(xì)介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
引入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è)計(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)文章
這篇文章主要為大家介紹了vue中destroyed方法及使用示例講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
下面小編就為大家分享一篇vue二級(jí)路由設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vuex的實(shí)戰(zhàn)使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個(gè)偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)，watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題
這篇文章主要介紹了vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue動(dòng)態(tài)添加行/刪除行的完整代碼示例
在開發(fā)中我們常常會(huì)碰到這種業(yè)務(wù),有一些數(shù)據(jù)需要在前端進(jìn)行刪除,這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加行/刪除行的相關(guān)資料,需要的朋友可以參考下2024-02-02