vue和js中实现模糊查询方式

下面给出实现模糊查询方式的完整攻略。

一、实现原理

要想实现模糊查询，需要的是对输入的关键字进行处理，将其与数据源进行匹配。可以利用JS的字符串操作方法来进行模糊匹配，例如使用indexOf方法来判断一个字符串中是否含有某个子串，如果存在，则匹配成功，可以将其作为搜索结果之一。

在Vue中，我们可以利用计算属性来实现模糊查询的应用逻辑，当数据源或者输入的关键字发生变化时，计算属性会自动重新计算输出的结果，从而实现模糊查询功能。

二、代码实现

1. JS中的实现示例

let data = ['JavaScript', 'Java', 'Python', 'PHP', 'HTML', 'CSS']
let keyword = 'Ja'
let result = []
for (let i = 0; i < data.length; i++) {
  if (data[i].indexOf(keyword) >= 0) {
    result.push(data[i])
  }
}
console.log(result)

通过使用indexOf方法检索数据源，如果检索到合适的结果，就将其加入结果集中。这段代码输出的结果如下：

["JavaScript", "Java"]

2. Vue中的实现示例

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入搜索关键字" />
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      keyword: '',
      data: [
        { id: '01', name: 'JavaScript' },
        { id: '02', name: 'Java' },
        { id: '03', name: 'Python' },
        { id: '04', name: 'PHP' },
        { id: '05', name: 'HTML' },
        { id: '06', name: 'CSS' }
      ]
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => item.name.indexOf(this.keyword) >= 0)
    }
  } 
}
</script>

在这个示例中，我们使用Vue的双向数据绑定将用户输入的搜索关键字keyword与计算属性filteredData进行绑定。当keyword或者data发生变化时，filteredData会重新计算返回需要展示的搜索结果。其结果与JS的实现示例相同。