当前位置：首页 > VUE

vue实现搜索城市

2026-01-19 08:00:10VUE

Vue 实现搜索城市功能

数据准备

在Vue组件中定义一个城市列表数组和一个搜索关键词变量。城市列表可以静态定义或通过API动态获取。

data() {
  return {
    cities: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉'],
    searchQuery: ''
  }
}

模板部分

创建一个输入框用于输入搜索关键词，并显示过滤后的城市列表。

vue实现搜索城市

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索城市">
    <ul>
      <li v-for="city in filteredCities" :key="city">
        {{ city }}
      </li>
    </ul>
  </div>
</template>

计算属性

使用计算属性实现城市搜索过滤逻辑，根据输入的关键词匹配城市名称。

computed: {
  filteredCities() {
    return this.cities.filter(city => {
      return city.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

使用API获取城市数据

如果需要从后端获取城市数据，可以在created或mounted钩子中调用API。

vue实现搜索城市

created() {
  fetch('https://api.example.com/cities')
    .then(response => response.json())
    .then(data => {
      this.cities = data
    })
}

添加防抖优化

对于频繁的输入操作，可以添加防抖函数优化性能。

methods: {
  debounceSearch: _.debounce(function() {
    this.filteredCities = this.cities.filter(city => {
      return city.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }, 300)
}

样式美化

为搜索框和列表添加基本样式，提升用户体验。

input {
  padding: 8px;
  width: 200px;
  margin-bottom: 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px;
  cursor: pointer;
}
li:hover {
  background-color: #f0f0f0;
}