快捷導(dǎo)航

Vue使用van-search和監(jiān)聽(tīng)@Watch實(shí)現(xiàn)搜索方式

更新時(shí)間：2025年09月22日 08:39:43 作者：勛勛勛勛小勛勛

文章介紹了Vant UI的van-search組件在不同設(shè)備的搜索觸發(fā)方式：PC端按回車鍵,移動(dòng)端點(diǎn)擊輸入法搜索按鈕；并提到使用@Watch監(jiān)聽(tīng)輸入框數(shù)據(jù)變化,尤其關(guān)注取消或刪除操作后的狀態(tài)更新

使用van-search監(jiān)聽(tīng)@Watch實(shí)現(xiàn)搜索

van-search

在輸入框輸入數(shù)據(jù)，當(dāng)在PC端點(diǎn)擊回車開(kāi)始搜索，在手機(jī)端點(diǎn)擊輸入法中的搜索開(kāi)始搜索，

@Watch

主要用于當(dāng)點(diǎn)擊取消或刪除輸入框中的數(shù)據(jù)監(jiān)聽(tīng)數(shù)據(jù)的變化

.vue

<van-search

v-model="keywordSubordinate"

placeholder="請(qǐng)輸入搜索關(guān)鍵詞"

@search="querySubordinateList"

/>

.ts

private keywordSubordinate = "";

@Watch("keywordSubordinate")

onkeywordSubordinateChanged(newVal: string, oldVal: string) {

if (!newVal || newVal === "") {   //當(dāng)輸入框?yàn)榭諘r(shí)

this.querySubordinateList();

}

}

private querySubordinateList() {

}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中的同步調(diào)用和異步調(diào)用方式
這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
快速處理vue渲染前的顯示問(wèn)題
下面小編就為大家分享一篇快速處理vue渲染前的顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue中設(shè)置height:100%無(wú)效的問(wèn)題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無(wú)效的問(wèn)題及解決方法，需要的朋友可以參考下
2018-07-07
詳解vue過(guò)度效果與動(dòng)畫(huà)transition使用示例
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果，Vue 提供了內(nèi)置的過(guò)渡封裝組件transition，該組件用于包裹要實(shí)現(xiàn)過(guò)渡效果的組件
2021-10-10
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
nuxt 路由、過(guò)渡特效、中間件的實(shí)現(xiàn)代碼
這篇文章主要介紹了nuxt 路由、過(guò)渡特效、中間件的實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue項(xiàng)目運(yùn)行時(shí)報(bào)錯(cuò)：JS內(nèi)存溢出的解決方法
這篇文章主要介紹了Vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)JavaScript堆內(nèi)存已滿的錯(cuò)誤,并討論了解決方法,通過(guò)下載特定插件并修改相關(guān)文件,解決了項(xiàng)目運(yùn)行時(shí)的內(nèi)存溢出問(wèn)題,需要的朋友可以參考下
2025-05-05
Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)
這篇文章主要介紹了Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來(lái)看看Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容
2021-10-10
vue自定義彈框效果(確認(rèn)框、提示框)
這篇文章主要為大家詳細(xì)介紹了vue自定義彈框，實(shí)現(xiàn)確認(rèn)框、提示框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05