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-03-03
在这篇博客中,我们将探讨 Vue 文件组织结构不合理的几个常见问题,并提供解决方案,以帮助开发者创建更清晰、更高效的项目文件结构,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
最近小编在做vue2.0的项目，遇到移动端实时检索搜索更新列表的效果，下面脚本之家小编给大家带来了vue2.0 移动端的输入框实时检索更新列表功能的实例代码，感兴趣的朋友参考下吧2018-05-05
这篇文章主要介绍了在vue项目中使用百度地图的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴借鉴价值,需要的朋友可以参考下2018-06-06
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
最近小编接到这样的需求：弹出框（或Popover）在 show 后，点击空白处可以将其 hide。针对这个需求，小编整理了三种实现方式，如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧2019-10-10
这篇文章主要介绍了vue中怎样实现弹出层动画效果，由上而下渐渐显示，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-09
这篇文章主要介绍了Vue中使用wangeditor富文本编辑的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了vue-router的基本使用和配置教程，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue+webpack 更换主题N种方案优劣分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最新评论