Vue实现模糊查询filter()实例详解
需求：在输入框里输入内容，包含相关内容的值被筛选出来；
图示：
最初的代码：
<body>
<div id="box">
<input type="text" @input="handleInput()" v-model="mytext">
<ul>
<li v-for="item in datalist" :key="item">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"",
datalist:["aaa","add","bbb","bbc","ccc","ddd","abd"]
},
methods:{
handleInput(){
console.log("input",this.mytext)
this.datalist=this.datalist.filter(item=>item.includes(this.mytext))//筛选出来包含输入框值的元素
//然后赋值给原数组，因为filter不会改变原数组，所以要用赋值的办法使得原数组改变，进而改变dom
}
}
})
</script>
</body>思路分析：
input、change事件选择：
首先我们要获取输入框里的内容，知道输入框当前的内容才能进行筛选，事件有两种可以选择：input和change，我们使用了input，它的作用是：只要输入框的value发生改变就会触发；为什么不用change，因为它的作用是：当value值发生改变而且输入框失去焦点的时候才能触发，也就是如果我们改变了输入框的值，但是鼠标一直放在输入框中没失去焦点，它也是不会触发的，我们需要的是输入框每次改变，就进行筛选，所以说change是不行的。
v-model的使用：
- 使用v-model的原因是能拿到输入框的值，把它放在input事件的回调函数里，就可以实现每次输入框的值改变就能拿到相应的值。
- 也就是“console.log("input",this.mytext)”这句代码的含义。
filter的用法：
filter（回调函数）：filter方法具有筛选功能，筛选出来符合条件的值，参数是回调函数，本来的写法是下面这样，代码中用的是箭头函数的写法，箭头函数写法可以省略function，（），{}和return（当然是在一定条件限制下，上面的代码符合这个要求，所以可以省略）。箭头后面写的是判断条件。
filter(function(){
return 判断条件
})includes方法：
这个方法是字符串的一个方法，可以找出来包含某个内容的所有元素。
覆盖原数组的原因：
筛选完以后要赋值给原数组是因为，必须改变原数组，才能实现dom的更新，而filter方法不会改变原数组，所以要用赋值的方法。
为什么要重新赋值一个数组originList：
因为如果按照下面这个方法：
结果是，当你输入一个“a”，筛选出来了包含a的元素，然后数组就改变成只包含a的元素的值了，比如数组变为["aaa","add",'abd"]，然后下一次想在数组上去查其他的元素，比如查“c”相关的元素，就查不到了，因为原数组已经被改变了，回不去了。所以这就有问题了，因为我们想每次都在原数组的基础上进行查。 有几种解决办法：
（1）方法一：上面那个复制一个新的数组出来，每次在新数组上查询，再赋值给datalist数组进行显示，这样新数组始终是不会改变的，所以这样就能保证我们每次查询都是在完整的数组上查询的。 代码见：（在原来的代码中更改的部分）
每次从老数组里面过滤赋值给新数组，就能保证“回不去的问题”
结果：
（2） 方法二：定义一个函数表达式，通过返回筛选后的结果，重新让li遍历
<body>
<div id="box">
<input type="text" v-model="mytext">
<ul>
<li v-for="item in test()" :key="item">
{{item}}
</li>
</ul>
<!-- 定义一个函数表达式 -->
<!-- {{test()}} -->
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"",
datalist:["aaa","add","bbb","bbc","ccc","ddd","abd"],
},
methods:{
test(){
return this.datalist.filter(item=>item.includes(this.mytext))
}
}
})
</script>
</body>- test（）是一个方法，函数表达式；
- 表达式可以放在{{}}双括号里，也可以放在“v-”指令里，函数表达式也是表达式的一种，所以可以放在v-for里；
- 每次mytext改变，test（）方法都会重新执行；
- 重点注意的地方：
总结
到此这篇关于Vue实现模糊查询filter()的文章就介绍到这了,更多相关Vue模糊查询filter()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
如何使用yarn创建vite+vue3&&electron多端运行
这篇文章主要介绍了如何使用yarn创建vite+vue3&&electron多端运行,本文分步骤给大家介绍的非常详细，包括使用yarn创建vite+vue3项目会遇到哪些问题，感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了Vue+TypeScript中处理computed方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
自定义指令,是Vue提供的一种扩展和定制的机制,使开发者能够在组件中直接操作DOM、处理事件、添加样式等,并提供了与第三方库集成的方式,定义指令使得Vue在处理交互和DOM操作时更加灵活和强大,本文将带大家搞懂Vue中的自定义指令,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue 提供了很多自定义指令，大大方便了我们的开发，其中最常用的也就是 v-model，他可以在组件上使用以实现双向绑定。它可以绑定多种数据结构, 今天总结一下用法2023-04-04
这篇文章主要介绍了Vue与.net Core 接收List＜T＞泛型参数，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了前端vue打包项目，如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论