当前位置：首页 > VUE

vue实现筛选效果

2026-02-18 07:36:55VUE

Vue实现筛选效果的方法

在Vue中实现筛选效果通常涉及数据绑定、计算属性和事件处理。以下是几种常见的实现方式：

使用计算属性进行筛选

计算属性非常适合基于现有数据派生新数据，比如筛选列表：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <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: 'Cherry' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用v-if和v-show实现条件渲染

对于简单的筛选，可以使用v-if或v-show指令：

<template>
  <div>
    <button @click="filter = 'active'">Show Active</button>
    <button @click="filter = 'completed'">Show Completed</button>
    <ul>
      <li v-for="item in items" 
          :key="item.id"
          v-show="filter === 'all' || item.status === filter">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

使用自定义过滤器方法

对于更复杂的筛选逻辑，可以创建单独的方法：

<template>
  <div>
    <input v-model="minPrice" type="number" placeholder="Min price">
    <ul>
      <li v-for="product in filterByPrice(products, minPrice)" 
          :key="product.id">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minPrice: 0,
      products: [
        { id: 1, name: 'Laptop', price: 999 },
        { id: 2, name: 'Phone', price: 699 },
        { id: 3, name: 'Tablet', price: 399 }
      ]
    }
  },
  methods: {
    filterByPrice(products, minPrice) {
      return products.filter(product => product.price >= minPrice)
    }
  }
}
</script>

使用Vuex进行状态管理

对于大型应用，可以使用Vuex管理筛选状态：

// store.js
export default new Vuex.Store({
  state: {
    products: [...],
    filters: {
      category: null,
      priceRange: [0, 1000]
    }
  },
  getters: {
    filteredProducts: (state) => {
      return state.products.filter(product => {
        const matchesCategory = !state.filters.category || 
          product.category === state.filters.category
        const matchesPrice = product.price >= state.filters.priceRange[0] && 
          product.price <= state.filters.priceRange[1]
        return matchesCategory && matchesPrice
      })
    }
  }
})

使用第三方库

对于更高级的筛选需求，可以考虑使用专门的数据表格组件或筛选库：

import { VDataTable } from 'vuetify/lib'

export default {
  components: {
    VDataTable
  },
  data() {
    return {
      headers: [...],
      items: [...],
      search: ''
    }
  }
}

这些方法可以根据具体需求单独使用或组合使用，实现从简单到复杂的各种筛选功能。

vue实现筛选效果