Vue使用van-search和監(jiān)聽@Watch實(shí)現(xiàn)搜索方式
更新時間：2025年09月22日 08:39:43 作者：勛勛勛勛小勛勛
文章介紹了Vant UI的van-search組件在不同設(shè)備的搜索觸發(fā)方式：PC端按回車鍵,移動端點(diǎn)擊輸入法搜索按鈕；并提到使用@Watch監(jiān)聽輸入框數(shù)據(jù)變化,尤其關(guān)注取消或刪除操作后的狀態(tài)更新
使用van-search監(jiān)聽@Watch實(shí)現(xiàn)搜索
van-search
在輸入框輸入數(shù)據(jù)，當(dāng)在PC端點(diǎn)擊回車開始搜索，在手機(jī)端點(diǎn)擊輸入法中的搜索開始搜索，
@Watch
主要用于當(dāng)點(diǎn)擊取消或刪除輸入框中的數(shù)據(jù)監(jiān)聽數(shù)據(jù)的變化
- .vue
<van-search v-model="keywordSubordinate" placeholder="請輸入搜索關(guān)鍵詞" @search="querySubordinateList" />
- .ts
private keywordSubordinate = "";
@Watch("keywordSubordinate")
onkeywordSubordinateChanged(newVal: string, oldVal: string) {
if (!newVal || newVal === "") { //當(dāng)輸入框?yàn)榭諘r
this.querySubordinateList();
}
}
private querySubordinateList() {
}
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue文件的組織結(jié)構(gòu)不合理之優(yōu)化項(xiàng)目結(jié)構(gòu)詳解
在這篇博客中,我們將探討 Vue 文件組織結(jié)構(gòu)不合理的幾個常見問題,并提供解決方案,以幫助開發(fā)者創(chuàng)建更清晰、更高效的項(xiàng)目文件結(jié)構(gòu),希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue2.0實(shí)現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近小編在做vue2.0的項(xiàng)目，遇到移動端實(shí)時檢索搜索更新列表的效果，下面腳本之家小編給大家?guī)砹藇ue2.0 移動端的輸入框?qū)崟r檢索更新列表功能的實(shí)例代碼，感興趣的朋友參考下吧2018-05-05
這篇文章主要介紹了在vue項(xiàng)目中使用百度地圖的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價值,需要的朋友可以參考下2018-06-06
Vue 實(shí)現(xiàn)點(diǎn)擊空白處隱藏某節(jié)點(diǎn)的三種方式(指令、普通、遮罩）
最近小編接到這樣的需求：彈出框（或Popover）在 show 后，點(diǎn)擊空白處可以將其 hide。針對這個需求，小編整理了三種實(shí)現(xiàn)方式，如果大家對vue 點(diǎn)擊空白隱藏節(jié)點(diǎn)問題感興趣的朋友跟隨小編一起看看吧2019-10-10
這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動畫效果，由上而下漸漸顯示，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09
這篇文章主要介紹了Vue中使用wangeditor富文本編輯的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了vue-router的基本使用和配置教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue+webpack 更換主題N種方案優(yōu)劣分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開發(fā)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11