【VUE】

最新推荐文章于 2025-10-17 14:26:08 发布

原创最新推荐文章于 2025-10-17 14:26:08 发布 · 265 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

本文介绍了一种使用 Vue2 和 jsfilter 在不修改原数组的情况下实现模糊查询的新方法。通过filter方法和includes函数，实现了输入框实时搜索列表数据的功能。文章详细讲解了filter和includes的用法，并提供了页面布局、数据源及方法的代码示例，展示了模糊查询的效果。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

vue2+js filter实现模糊查询

前言
一、filter及includes
二、步骤
总结

前言

目前关于vue的模糊查询大多数案例都是用操作原数组的方法去实现的，最近学到了一种新的写法，在这里记录一下。

一、filter及includes

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。
filter操作不会改变数据源。

js中的includes用法

1.数组
includes 可以判断一个数组中是否包含某一个元素，并返回true 或者false
[‘a’,‘b’,‘c’].includes(‘a’)
true
[‘a’,‘b’,‘c’].includes(1)
false

includes可以包含两个参数，第二个参数表示判断的起始位置
起始位置第一个数字是0。

2.字符串
查找字符串是否包含 “Runoob”:

var str = “Hello world, welcome to the Runoob。”; var n = str.includes(“Runoob”);
n 输出结果:

true

二、步骤

1.页面布局

代码如下：

<template>
  <div class="login_container">
    <input type="text" v-model="myText">
    <ul>
      <li v-for="item in test()" :key="item">{{item}}</li>
    </ul>
  </div>
</template>

2.数据源及方法

代码如下（示例）：

<script>
export default {
  data() {
    return {
      myText:'',
      fruits: ['苹果','香蕉','梨','桃子','杏','李子','aaa','bbb','abc','ccc'],
    }
  },
  methods: {
    test(){
       return this.fruits.filter(item => item.includes(this.myText))
    }
  }
}
</script>