Vue中@change、@input和@blur的區(qū)別及@keyup介紹
一、@change、@input、@blur事件
@change在輸入框發(fā)生變化且失去焦點(diǎn)后觸發(fā);
@input在輸入框內(nèi)容發(fā)生變化后觸發(fā)(在界面加載數(shù)據(jù)以前)
@blur失去焦點(diǎn)就觸發(fā)
注意:
@change先于@blur
@input和change的默認(rèn)參數(shù)為輸入內(nèi)容,而blur的默認(rèn)參數(shù)為dom節(jié)點(diǎn)。
在搜索下拉框選擇數(shù)據(jù)后,即刻搜索的案例:
<!-- 下拉搜索框 --> <el-select v-model="listQuery.productId" clearable placeholder="請(qǐng)選擇協(xié)議號(hào)" filterable class="filter-item" @change="handleFilter" //添加@change事件,并調(diào)用篩選函數(shù)handleFilter() > <el-option v-for="item in productList" :key="item.id" :label="item.productId" :value="item.productId" :title="item.productId" style="width: 200px"> </el-option> </el-select>
二、@keyup事件
Vue中的@keyup(鍵盤(pán)事件)是按鍵松開(kāi),當(dāng)指定的按鍵松開(kāi)會(huì)觸發(fā)的事件,可以監(jiān)聽(tīng)不同的按鍵響應(yīng)。
事件代碼 | 事件描述 |
---|---|
@keyup.enter | 回車(chē)按鍵松開(kāi) |
@keyup.left | 左鍵按鍵松開(kāi) |
@keyup.right | 右鍵按鍵松開(kāi) |
@keyup.up | 上鍵按鍵松開(kāi) |
@keyup.down | 下鍵按鍵松開(kāi) |
@keyup.delete | 刪除按鍵松開(kāi) |
在輸入框輸入數(shù)據(jù)并按下enter鍵后進(jìn)行篩選示例如下:
<el-input v-model="listQuery.nameParam" maxlength="30" placeholder="請(qǐng)輸入手機(jī)號(hào)或用戶(hù)名" style="width: 200px" class="filter-item" clearable @clear="handleFilter" //用戶(hù)點(diǎn)擊清空按鈕則調(diào)用篩選函數(shù),返回所有列表 @keyup.enter.native="handleFilter" /> //輸入后按enter鍵則調(diào)用篩選函數(shù),返回滿(mǎn)足條件的列表
@click:可清空的單選模式下用戶(hù)點(diǎn)擊清空按鈕時(shí)觸發(fā)
補(bǔ)充:el-input的@change事件自定義傳參
一、無(wú)效傳參
@change="change(val, index)"
二、有效傳參
@change="((val)=>{change(val, index)})"
<div v-for="(item,index) in itemList"> <el-input v-model="item.value" @change="((val)=>{doSomething(val, index)})"> </el-input> </div>
總結(jié)
到此這篇關(guān)于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的文章就介紹到這了,更多相關(guān)Vue中@change、@input和@blur內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)離線(xiàn)地圖+leaflet+高德瓦片的詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)離線(xiàn)地圖+leaflet+高德瓦片的詳細(xì)代碼,Vue Leaflet是一種結(jié)合了Vue框架和Leaflet庫(kù)的前端技術(shù),用于展示和操作天地圖,需要的朋友可以參考下2023-10-10Vue用mixin合并重復(fù)代碼的實(shí)現(xiàn)
這篇文章主要介紹了Vue用mixin合并重復(fù)代碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11VUE 動(dòng)態(tài)組件的應(yīng)用案例分析
這篇文章主要介紹了VUE 動(dòng)態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動(dòng)態(tài)組件的應(yīng)用場(chǎng)景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下2019-12-12自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08在vue.config.js中優(yōu)化webpack配置的方法
在日常開(kāi)發(fā)中我們離不開(kāi)打包工具webpack,但是不同的配置會(huì)影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間,也會(huì)影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過(guò)的可以?xún)?yōu)化webpack的配置,需要的朋友可以參考下2024-05-05vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面
這篇文章主要介紹了vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue3的ts報(bào)錯(cuò):類(lèi)型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報(bào)錯(cuò):類(lèi)型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項(xiàng)目中遇到的一個(gè)問(wèn)題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08