Vue使用van-search和监听@Watch实现搜索方式
更新时间：2025年09月22日 08:39:43 作者：勋勋勋勋小勋勋
文章介绍了Vant UI的van-search组件在不同设备的搜索触发方式：PC端按回车键,移动端点击输入法搜索按钮；并提到使用@Watch监听输入框数据变化,尤其关注取消或删除操作后的状态更新
使用van-search监听@Watch实现搜索
van-search
在输入框输入数据，当在PC端点击回车开始搜索，在手机端点击输入法中的搜索开始搜索，
@Watch
主要用于当点击取消或删除输入框中的数据监听数据的变化
- .vue
<van-search v-model="keywordSubordinate" placeholder="请输入搜索关键词" @search="querySubordinateList" />
- .ts
private keywordSubordinate = "";
@Watch("keywordSubordinate")
onkeywordSubordinateChanged(newVal: string, oldVal: string) {
if (!newVal || newVal === "") { //当输入框为空时
this.querySubordinateList();
}
}
private querySubordinateList() {
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的同步调用和异步调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
下面小编就为大家分享一篇快速处理vue渲染前的显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue中设置height 100%无效的问题及解决方法，需要的朋友可以参考下2018-07-07
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，Vue 提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件2021-10-10
这篇文章主要为大家介绍了Vue 项目迁移 React 路由部分经验分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了nuxt 路由、过渡特效、中间件的实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue项目运行时出现JavaScript堆内存已满的错误,并讨论了解决方法,通过下载特定插件并修改相关文件,解决了项目运行时的内存溢出问题,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了Vue3网站首页布局开发，上篇文章已经提到集成Ant Design Vue后，和Element Ui一样，还是组件的使用，接下俩我们就来看看Vue3网站首页布局开发的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
这篇文章主要为大家详细介绍了vue自定义弹框，实现确认框、提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论