1. @change、@input、@blur、@focus事件

• @change在輸入框發(fā)生變化且失去焦點后觸發(fā)；

• @input在輸入框內(nèi)容發(fā)生變化后觸發(fā)（在界面加載數(shù)據(jù)以前）

• @blur失去焦點就觸發(fā)

• @focus獲得焦點就觸發(fā)

注意：

• @change先于@blur

• @input和change的默認參數(shù)為輸入內(nèi)容，而blur的默認參數(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-optionv-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（鍵盤事件）是按鍵松開，當指定的按鍵松開會觸發(fā)的事件，可以監(jiān)聽不同的按鍵響應(yīng)。

事件代碼	事件描述
@keyup.enter	回車按鍵松開
@keyup.left	左鍵按鍵松開
@keyup.right	右鍵按鍵松開
@keyup.up	上鍵按鍵松開
@keyup.down	下鍵按鍵松開
@keyup.delete	刪除按鍵松開

在輸入框輸入數(shù)據(jù)并按下enter鍵后進行篩選示例如下：

<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-inputv-model="item.value"@change="((val)=>{doSomething(val, index)})"></el-input></div>