视频直播系统源码，列表关键字模糊搜索

视频直播系统源码，列表关键字模糊搜索实现的相关代码

1、HTML结构

 

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

​

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

2、实现

2.1 基于计算属性computed实现

 

1

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

 

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

值得注意的地方：

abc.indexOf('a')的返回值是0，而abc.indexOf('')的返回值也是0。

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

2.2 基于侦听器watch实现

 

1

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

 

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

需要事先准备一个值为空的属性filterFruitList。

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

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

以上就是视频直播系统源码，列表关键字模糊搜索实现的相关代码， 更多内容欢迎关注之后的文章