1、Demo演示

模糊搜索功能是日常开发中常见的一种功能，这里用两种方式进行模拟实现。

2、HTML结构

<template><div><div><input type="text" v-model="keyWord"></div><ul><li  v-for="fruit in filterFruitList" :key="fruit.id">{{fruit.name}}</li></ul></div>
</template>

为简单起见，HTML结构仅包含一个搜索框和一个列表。

3、实现

3.1 基于计算属性`computed`实现

export default {name: 'Computed',data() {return {keyWord: '',fruitList: [{"id": 1,"name": '香蕉'},{"id": 2,"name": '水蜜桃'},{"id": 3,"name": '香瓜'},{"id": 4,"name": '西瓜'},{"id": 5,"name": '哈密瓜'}]}},computed: {filterFruitList() {return this.fruitList.filter((item) => {return item.name.indexOf(this.keyWord) !== -1;})}}
}
</script>

computed的实现方式很简洁，主要借助一个计算属性，在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表，并将新数据列表渲染到页面。

值得注意的地方：
abc.indexOf('a')的返回值是0，而abc.indexOf('')的返回值也是0。

因此，在一开始没有输入任何数据的时候，计算属性列表filterFruitList中经过计算得到的数据和原始列表数据fruitList是一样的。

3.2 基于侦听器`watch`实现

<script>
export default {name: 'Computed',data() {return {keyWord: '',fruitList: [{"id": 1,"name": '香蕉'},{"id": 2,"name": '水蜜桃'},{"id": 3,"name": '香瓜'},{"id": 4,"name": '西瓜'},{"id": 5,"name": '哈密瓜'}],filterFruitList: []}},watch: {keyWord: {immediate: true,handler(val) {this.filterFruitList = this.fruitList.filter((item) => {return item.name.indexOf(val) !== -1;})}}}
}
</script>

使用watch实现需要注意的地方：

需要事先准备一个值为空的属性filterFruitList。
在watch实现中，keyWord中详细配置immediate的值要设置为true，就相当于，在输入框首次没有输入任何数据时，立即执行一次，将filterFruitList 的值初始化为fruitList中的值。

注意： 不论是computed，还是watch的实现方式，都没有对原始数据fruitList进行修改或者破坏。这也是一个比较重要的点。

【Vue实践】列表搜索框中模糊搜索功能的两种实现方式相关推荐

搜索计算机无法输入法,Windows10左下角搜索框无法输入字符的两种解决方法
用户在使用win10系统过程中,经常会使用到其自带的搜索功能.不过,近来有些用户却发现电脑左下角的搜索框突然无法输入字符.那这该怎么办呢?我们最常用的方法是重启电脑,让win10的搜索服务重新运行.下 ...
计算机搜索没办法打汉字,Win10左下角搜索框无法输入字符的两种解决方法
用户在使用 win10系统过程中,经常会使用到其自带的搜索功能.不过,近来有些用户却发现电脑左下角的搜索框突然无法输入字符.那这该怎么办呢?我们最常用的方法是重启电脑,让win10的搜索服务重新运行 ...
java map遍历_Java中Map集合的两种遍历方式
Java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下Java中Map集合的两种遍历方式! 关于遍历Map集合的几 ...
java中两种遍历集合的方式_Java中Map集合的两种遍历方式
Java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下Java中Map集合的两种遍历方式! 关于遍历Map集合的几 ...
1.JavaScript中定义数组的两种主要方式
JavaScript中定义数组的两种主要方式(new Array()和[]方式) new Array() ①可以用像JAVA的那种写法的方式定义,如 var arr = new Array() 这样定 ...
在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分（持续补充）
文章目录前言一.align 与 valign 的对齐方式与取值二.常见应用区分整理 2.1.H5 页面设计的取值 2.2.表格标题的取值 2.3.表格属性的取值总结前言不知道大家在学习 H ...
ajax onload怎么用,Ajax中onload和onreadystatechange两种请求方式的区别
一. onreadystatechange 1. XMLHttpRequest对象有一个属性readyState,将其(xhr.readyState)打印后发现.进入onreadystatechang ...
Java中定义字符串的两种常见方式、使用==和equals()比较字符串
在讲使用==和equals()比较字符串之前,我们首先要讲定义字符串的两种常见方式,一种是定义一个常量,即直接定义字符串,一种是通过new关键字定义一个变量,即使用String类定义字符串,如下图: ...
Java中匿名类的两种实现方式
使用匿名内部类课使代码更加简洁.紧凑,模块化程度更高.内部类能够访问外部内的一切成员变量和方法,包括私有的,而实现接口或继承类做不到.然而这个不是我说的重点,我说的很简单,就是匿名内部类的两种实现方式 ...

【Vue实践】列表搜索框中模糊搜索功能的两种实现方式

文章目录

1、Demo演示

2、HTML结构

3、实现

3.1 基于计算属性`computed`实现

3.2 基于侦听器`watch`实现

【Vue实践】列表搜索框中模糊搜索功能的两种实现方式相关推荐

最新文章

热门文章

【Vue实践】列表搜索框中模糊搜索功能的两种实现方式

文章目录

1、Demo演示

2、HTML结构

3、实现

3.1 基于计算属性computed实现

3.2 基于侦听器watch实现

【Vue实践】列表搜索框中模糊搜索功能的两种实现方式相关推荐

最新文章

热门文章

3.1 基于计算属性`computed`实现

3.2 基于侦听器`watch`实现