当前位置：首页 > VUE

vue实现条件查询

2026-03-29 04:39:40VUE

Vue 实现条件查询的方法

使用计算属性实现条件查询

计算属性可以根据依赖的数据动态计算并返回结果，适合用于条件查询。在 Vue 组件的 computed 中定义一个计算属性，根据输入的条件过滤数据。

vue实现条件查询

<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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用方法实现动态查询

如果查询逻辑较复杂或需要异步处理，可以使用方法实现条件查询。通过调用方法返回过滤后的数据。

vue实现条件查询

<template>
  <div>
    <input v-model="searchQuery" @input="filterItems" 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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      filteredItems: []
    }
  },
  methods: {
    filterItems() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  created() {
    this.filterItems()
  }
}
</script>

结合 Vuex 实现全局条件查询

在大型项目中，可以使用 Vuex 管理状态，并通过 getters 实现条件查询。

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ],
    searchQuery: ''
  },
  mutations: {
    setSearchQuery(state, query) {
      state.searchQuery = query
    }
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      )
    }
  }
})

// 组件中使用
<template>
  <div>
    <input v-model="searchQuery" @input="updateQuery" placeholder="输入查询条件" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['filteredItems']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.setSearchQuery(value)
      }
    }
  },
  methods: {
    ...mapMutations(['setSearchQuery']),
    updateQuery(e) {
      this.setSearchQuery(e.target.value)
    }
  }
}
</script>

使用第三方库实现高级查询

对于复杂查询需求，可以结合 Lodash 等工具库实现防抖、节流或深度查询。

<template>
  <div>
    <input v-model="searchQuery" @input="debouncedFilter" 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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      filteredItems: []
    }
  },
  created() {
    this.debouncedFilter = _.debounce(this.filterItems, 300)
  },
  methods: {
    filterItems() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>