记一次Vue实现关键词搜索的过程（watch实现）

最新推荐文章于 2024-04-18 09:51:55 发布
最新推荐文章于 2024-04-18 09:51:55 发布
阅读量4.1k 收藏 30
点赞数 4
分类专栏： 笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54307456/article/details/123589445
版权
本文记录了使用Vue实现关键词搜索功能的过程，包括收集用户输入、利用filter()和indexOf()匹配关键字，以及遇到的问题和解决方案。在初始实现中，由于多次过滤导致数据丢失，通过创建新数组filPerson并使用Vue的watch进行深度监视和初始化调用来解决这个问题。
摘要由CSDN通过智能技术生成

目的

现有一个长度为4的对象数组

person:[
        {
   id:'001', name:'马冬梅', age:18, sex:'女'},
        {
   id:'002', name:'周冬雨', age:19, sex:'女'},
        {
   id:'003', name:'周杰伦', age:20, sex:'男'},
        {
   id
最低0.47元/天 解锁文章
SHIKARU
关注
  • 4
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现搜索文章关键字，滑到指定位置并且高亮
程序媛的博客
07-02 316
1、输入搜索条件，点击搜索按钮。2、滑到定位到指定的搜索条件。
基于Vue实现关键词实时搜索高亮显示关键词
12-09
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能，通过博客的方式总结一下，同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上，可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords" type="text" placeholder="请输入关键词" @input="handleQuer
Vue实现搜索关键词高亮显示
m0_59023970的博客
03-15 3706
vue关键词搜索高亮
vue input输入框关键字筛选检索列表数据展示
10-16
主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue关键字搜索功能（小案例）
y17757773039的博客
11-01 3685
两种方法实现关键字搜索功能，分别是watch方法和computed方法
vue.js学习之关键字搜索
weixin_45983953的博客
03-19 458
介绍关于表格列表关键字搜索的写法 需要自定义一个search方法，然后用到forEach()，indexOf方法或ifilter(),includes方法 使用indexOf方法 此方法可返回某个指定的子字符串在字符串中出现的位置，如果没有检索到则返回-1. 写法为：StringObject.indexOf(searchvalue, forindex) search()方法或可以写成以下方式...
vue+Element实现搜索关键字高亮功能
12-29
最近做了一个日志搜索的需求，要在页面上实现海量日志的关键字搜索。为了搜索更清晰，我最终实现了多条件搜索，且搜索结果的记录中的关键字全部高亮。 一、实现思路 1 实时监控表格，实现关键字的定位； 2 点击搜索按钮以后，实现记录中关键字的样式变化（即高亮）。 二、实现过程 1 搜索条件表单 了解了实现思路，就让我们一起来看一下实现过程（关键位置均给了注释） <el inline=true model=formQuery> <el> <el span=8> <el label=日志编码> &lt;el-input
vue实现搜索功能
12-29
本文实例为大家分享了vue实现搜索功能的具体代码，供大家参考，具体内容如下 methods (要有一定的触发条件才能执行，如点击事件) <input type=text name= id= placeholder=搜索 v-model=search/> <button @click=btn>搜索</button> {{list.name}} {{list.date}}<
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
深入Vue实现原理，实现一个响应式框架
02-24
在前面的章节中我们已经学习了Vue.js的基础内容并且了解了Vue.js的源码实现，包括：Vue的生命周期、Vue的数据响应、Vue的渲染流程等等，在这一章节我们会和大家一起去实现一个响应式的框架--MVue，MVue会遵循Vue的...
银行家算法的vue实现过程源码.zip
11-18
银行家算法的vue实现过程源码.zip银行家算法的vue实现过程源码.zip银行家算法的vue实现过程源码.zip银行家算法的vue实现过程源码.zip银行家算法的vue实现过程源码.zip银行家算法的vue实现过程源码.zip银行家算法的...
Vue实现搜索结果高亮显示关键字
10-16
主要为大家详细介绍了Vue实现搜索结果高亮显示关键字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2实现搜索结果中的搜索关键字高亮的代码
10-18
主要介绍了vue2实现搜索结果中的搜索关键字高亮的代码,需要的朋友可以参考下
vue 实现实时搜索文档关键字并高亮显示
最新发布
sinat_33255495的博客
04-18 1095
最近接到的一个新需求：实时搜索文档关键字并高亮显示，听起来好难的样子，仔细分析起来其实也蛮简单的。
vue实现关键字查询列表数据
weixin_43703816的博客
11-16 1464
vue实现关键字查询列表数据
VUE 中的搜索关键字
qq_46179813的博客
06-22 3784
1、定义一个搜索框 <label> 搜索关键字： <input type="search" name="" id="" value="" v-model="keywords"/> </label> 2、循环遍历，之前，v-for 中的数据，都是直接从 data 上的list中直接渲染过来的，现在，我们自定义了一个 search 方法，同时，把所有的关键字，通过传参的形式，传递给了 search 方法，在 search 方法内部，通过 执行 for 循环，把所有符合
Vue的watch
qq_38687592的博客
03-18 260
首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。值也可以是函数名：不过这个函数名要用单引号来包裹。 第三种情况厉害了。 值是包括选项的对象：选项包括有三个。 1.第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2.第二个是deep：其值是tr.
vue-watch 百度搜索框（模拟）
weixin_41040445的博客
12-21 622
例： <template> <div> <h1>{{a}}</h1> <button @click="add">++</button> </div> </template> <script> export default { data(){ return{ a:100 } }, methods:{
Vue实现红包雨动画效果
"Vue.js 实现红包雨效果的代码示例" 在 Vue.js 开发中，创建动态且吸引用户的交互效果是一种常见的需求，比如红包雨特效。以下将详细解析标题和描述中提到的“vue代码实现红包雨的”知识点。 首先，这段代码使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值