当前位置：首页 > VUE

vue简单查询功能实现

2026-01-23 16:53:43VUE

实现 Vue 简单查询功能

1. 创建 Vue 实例与数据绑定

在 Vue 实例的 data 中定义查询关键词 searchQuery 和数据列表 items。通过 v-model 实现输入框与数据的双向绑定。

<div id="app">
  <input v-model="searchQuery" placeholder="输入关键词查询">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
})

2. 使用计算属性实现过滤

通过 computed 计算属性实时过滤数据，避免直接修改原始数据。使用 filter 和 includes 方法实现不区分大小写的匹配。

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

3. 优化查询性能（可选）

对于大数据量场景，可通过以下方式优化：

使用 debounce 延迟触发查询
对数据预先建立索引
分页加载结果

// 使用 lodash 的 debounce
methods: {
  debouncedSearch: _.debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

4. 添加空状态提示

当查询结果为空时显示友好提示，提升用户体验。

<div v-if="filteredItems.length === 0">
  没有找到匹配的结果
</div>

5. 样式美化（可选）

添加基础 CSS 样式使界面更美观：

input {
  padding: 8px;
  width: 200px;
  margin-bottom: 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

以上实现方案具有以下特点：