vue实现名字查找功能

实现名字查找功能的方法

在Vue中实现名字查找功能可以通过多种方式，以下是几种常见的方法：

使用v-model和computed属性

创建一个输入框绑定到v-model，利用computed属性过滤列表：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索名字" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用watch和methods

当需要更复杂的搜索逻辑时，可以使用watch配合methods：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索名字" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      filteredItems: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filterItems(newVal)
    }
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  },
  created() {
    this.filterItems('')
  }
}
</script>

使用第三方库

对于大型数据集，可以考虑使用lodash的debounce函数优化性能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索名字" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      filteredItems: []
    }
  },
  watch: {
    searchQuery: _.debounce(function(newVal) {
      this.filterItems(newVal)
    }, 300)
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  },
  created() {
    this.filterItems('')
  }
}
</script>

使用Vuex管理状态

当应用状态需要全局管理时：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索名字" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    ...mapState(['items']),
    ...mapGetters(['filteredItems']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.$store.commit('updateSearchQuery', value)
      }
    }
  }
}
</script>

高级搜索功能

实现更复杂的搜索功能，如多字段搜索或模糊搜索：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索名字或拼音" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} ({{ item.pinyin }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三', pinyin: 'zhang san' },
        { id: 2, name: '李四', pinyin: 'li si' },
        { id: 3, name: '王五', pinyin: 'wang wu' }
      ]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item =>
        item.name.toLowerCase().includes(query) ||
        item.pinyin.includes(query)
      )
    }
  }
}
</script>

以上方法可以根据实际需求选择或组合使用，实现高效的名字查找功能。