vue进行输入框模糊查询

可以使用Vue的computed属性和v-model双向绑定实现输入框模糊查询。

首先，需要在data中定义一个数组用来存储所有数据，以及一个字符串用来存储查询关键字：

data() {
  return {
    dataList: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ],
    keyword: ''
  }
}

然后，在模板中使用v-model双向绑定输入框的值：

<input v-model="keyword" />

接着，在computed属性中使用filter方法过滤出符合条件的数据：

computed: {
  filteredList() {
    return this.dataList.filter(item => {
      return item.name.indexOf(this.keyword) !== -1
    })
  }
}

最后，在模板中使用v-for循环展示过滤后的数据：

<ul>
  <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>

完整代码示例：

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      keyword: ''
    }
  },
  computed: {
    filteredList() {
      return this.dataList.filter(item => {
        return item.name.indexOf(this.keyword) !== -1
      })
    }
  }
}
</script>