Vue中@change、@input和@blur、@focus的區(qū)別及@keyup用法
更新時間：2025年04月25日 11:03:16 作者：凡客丶
這篇文章主要介紹了Vue中@change、@input和@blur、@focus的區(qū)別及@keyup用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1. @change、@input、@blur、@focus事件
@change在輸入框發(fā)生變化且失去焦點后觸發(fā)；@input在輸入框內(nèi)容發(fā)生變化后觸發(fā)（在界面加載數(shù)據(jù)以前）@blur失去焦點就觸發(fā)@focus獲得焦點就觸發(fā)
注意：
@change先于@blur@input和change的默認(rèn)參數(shù)為輸入內(nèi)容，而blur的默認(rèn)參數(shù)為dom節(jié)點。
在搜索下拉框選擇數(shù)據(jù)后，即刻搜索的案例：
<!-- 下拉搜索框 -->
<el-select
v-model="listQuery.productId"
clearable
placeholder="請選擇協(xié)議號"
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>2. @keyup事件
Vue中的@keyup（鍵盤事件）是按鍵松開，當(dāng)指定的按鍵松開會觸發(fā)的事件，可以監(jiān)聽不同的按鍵響應(yīng)。
| 事件代碼 | 事件描述 |
|---|---|
| @keyup.enter | 回車按鍵松開 |
| @keyup.left | 左鍵按鍵松開 |
| @keyup.right | 右鍵按鍵松開 |
| @keyup.up | 上鍵按鍵松開 |
| @keyup.down | 下鍵按鍵松開 |
| @keyup.delete | 刪除按鍵松開 |
在輸入框輸入數(shù)據(jù)并按下enter鍵后進(jìn)行篩選示例如下：
<el-input v-model="listQuery.nameParam" maxlength="30" placeholder="請輸入手機號或用戶名" style="width: 200px" class="filter-item" clearable @clear="handleFilter" //用戶點擊清空按鈕則調(diào)用篩選函數(shù)，返回所有列表 @keyup.enter.native="handleFilter" /> //輸入后按enter鍵則調(diào)用篩選函數(shù)，返回滿足條件的列表
@click：可清空的單選模式下用戶點擊清空按鈕時觸發(fā)
3. 補充：el-input的@change事件自定義傳參
- 無效傳參
@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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue resource發(fā)送請求的幾種方式，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue中使用input[type="file"]實現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實現(xiàn)文件上傳功能，實現(xiàn)代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識，整合了第三方j(luò)query 插件select2,具體實例代碼大家參考下本文2018-04-04
在現(xiàn)代前端開發(fā)中,組件的重用性和異步加載是提升用戶體驗和優(yōu)化性能的關(guān)鍵因素,在Vue 3中,創(chuàng)建異步組件變得更為便利,本文將探討如何在Vue 3中使用setup語法糖來創(chuàng)建異步組件,感興趣的小伙伴跟著小編一起來看看吧2024-09-09
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue3 + ElementPlus動態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
文章介紹了如何使用ElementPlus的Table組件動態(tài)合并單元格,適用于后臺數(shù)據(jù)返回格式動態(tài)且沒有規(guī)律的場景,包括數(shù)據(jù)處理和按鈕操作,文章還附帶了效果圖和代碼詳解,希望能對大家有所幫助,感興趣的朋友跟隨小編一起看看吧2025-02-02
今天小編就為大家分享一篇Vue axios設(shè)置訪問基礎(chǔ)路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
現(xiàn)在vue項目基本上都是使用axios進(jìn)行請求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本文主要介紹了前后端分離項目中的跨域問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
這篇文章主要介紹了詳解vue配置請求多個服務(wù)端解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03