vue 監聽input輸入事件(oninput)的示例代碼支持模糊查詢

Posted on by

vue 監聽input輸入事件(oninput)支持模糊查詢

例如：表格模糊查詢，實現一邊輸入，一邊過濾數據

v-on:input ="searchData"

<el-input
   clearable
   placeholder="請輸入姓名或者員工編碼搜索"
   style="margin-bottom: 10px"
   size="small"
   v-on:input ="searchData"     //監聽
   v-model="nameOrcode">
   <i slot="prefix" class="el-input__icon el-icon-search" @click="searchData"></i>
</el-input>

補充：vue監聽input輸入事件-oninput

.vue文件其實是一個組件，關於它的說明我之前也寫過一篇文章，地址： .vue文件，今天這篇文章要講的是.vue文件中監聽input的輸入值變化事件。需求是這頁面中，改變input的值，就調用一個事件，第一想到的是oninput。

oninput 事件在用戶輸入時觸發，菜鳥教程中的用法是：

這裡寫圖片描述

但是在.vue中這樣寫是沒有作用的：

這裡寫圖片描述

<input type="text" id="cardsNum2"  value="1" @oninput ="inputFunc">

這樣寫也沒有作用：

這裡寫圖片描述

<input type="text" id="cardsNum2"  value="1" v-on:oninput ="inputFunc">

最後，這樣寫才起作用：

這裡寫圖片描述

<input type="text" id="cardsNum2"  value="1" v-on:input ="inputFunc">

到此這篇關於vue 監聽input輸入事件(oninput)支持模糊查詢的文章就介紹到這瞭,更多相關vue監聽input輸入事件oninput內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：