使用vue写模糊查询功能

Vue提供了很多实用的指令和组件，可以方便地实现模糊查询功能。以下是一个简单的例子：

首先，在你的Vue组件中，定义一个data属性来存储查询关键字和查询结果：

data() {
  return {
    searchKeyword: '',
    searchResult: []
  }
}

然后，在template中使用input元素来输入查询关键字，并使用v-model指令将其绑定到searchKeyword属性上：

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

接下来，在Vue组件的methods中，编写一个方法来处理模糊查询逻辑。这里使用了ES6的filter方法，根据查询关键字过滤出包含该关键字的结果：

methods: {
  search() {
    this.searchResult = this.items.filter(item => {
      return item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
    })
  }
}

最后，在input元素上添加一个@input事件监听器，当输入框内容变化时，调用search方法进行模糊查询：

<input type="text" v-model="searchKeyword" @input="search" />

完整代码如下：

<template>
  <div>
    <input type="text" v-model="searchKeyword" @input="search" />
    <ul>
      <li v-for="result in searchResult" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      searchResult: [],
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' },
        { id: 5, name: 'Elderberry' }
      ]
    }
  },
  methods: {
    search() {
      this.searchResult = this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      })
    }
  }
}
</script>