vue 監(jiān)聽input輸入事件(oninput)的示例代碼支持模糊查詢
更新時(shí)間：2023年02月04日 15:09:23 作者：前端小蔡姬
這篇文章主要介紹了vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢,比如說表格模糊查詢，實(shí)現(xiàn)一邊輸入，一邊過濾數(shù)據(jù)，本文通過示例代碼給大家詳細(xì)講解，需要的朋友可以參考下
vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢
例如：表格模糊查詢，實(shí)現(xiàn)一邊輸入，一邊過濾數(shù)據(jù)
v-on:input ="searchData"
<el-input clearable placeholder="請(qǐng)輸入姓名或者員工編碼搜索" style="margin-bottom: 10px" size="small" v-on:input ="searchData" //監(jiān)聽 v-model="nameOrcode"> <i slot="prefix" class="el-input__icon el-icon-search" @click="searchData"></i> </el-input>
補(bǔ)充：vue監(jiān)聽input輸入事件-oninput
.vue文件其實(shí)是一個(gè)組件，關(guān)于它的說明我之前也寫過一篇文章，地址： .vue文件，今天這篇文章要講的是.vue文件中監(jiān)聽input的輸入值變化事件。需求是這頁面中，改變input的值，就調(diào)用一個(gè)事件，第一想到的是oninput。
oninput 事件在用戶輸入時(shí)觸發(fā)，菜鳥教程中的用法是：
但是在.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">
到此這篇關(guān)于vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢的文章就介紹到這了,更多相關(guān)vue監(jiān)聽input輸入事件oninput內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細(xì)介紹兩者的共同點(diǎn)和區(qū)別，通過圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié)
這篇文章主要介紹了iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了修改Vue打包后的默認(rèn)文件名操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
本文主要介紹了element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
解決vue-cli-service不是內(nèi)部或外部命令也不是可運(yùn)行的程序或批處理文件的報(bào)錯(cuò)問題
這篇文章主要介紹了解決vue-cli-service不是內(nèi)部或外部命令也不是可運(yùn)行的程序或批處理文件的報(bào)錯(cuò)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
本篇文章主要介紹了詳解VueJs前后端分離跨域問題，詳細(xì)介紹了在項(xiàng)目內(nèi)設(shè)置代理（proxyTable）的方式來解決跨域問題，有興趣的可以了解一下2017-05-05
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實(shí)例的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
在?vue?里我們可以通過全局事件總線來實(shí)現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話我所有組件的都可以訪問到這個(gè)屬性，然后可以通過這個(gè)屬性來訪問其他組件給這個(gè)屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)2022-08-08
淺談vue單一組件下動(dòng)態(tài)修改數(shù)據(jù)時(shí)的全部重渲染
下面小編就為大家分享一篇淺談vue單一組件下動(dòng)態(tài)修改數(shù)據(jù)時(shí)的全部重渲染，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03