当前位置：首页 > VUE

vue实现商品排序

2026-03-08 16:00:39VUE

实现商品排序功能

在Vue中实现商品排序功能，可以通过计算属性或方法对商品列表进行排序处理。以下是几种常见的排序实现方式：

基于计算属性的排序

使用计算属性对商品列表进行排序，当排序条件变化时自动更新视图：

<template>
  <div>
    <select v-model="sortBy">
      <option value="priceAsc">价格升序</option>
      <option value="priceDesc">价格降序</option>
      <option value="sales">销量排序</option>
    </select>

    <div v-for="product in sortedProducts" :key="product.id">
      {{ product.name }} - 价格: {{ product.price }} - 销量: {{ product.sales }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, sales: 50 },
        { id: 2, name: '商品B', price: 200, sales: 30 },
        { id: 3, name: '商品C', price: 150, sales: 70 }
      ],
      sortBy: 'priceAsc'
    }
  },
  computed: {
    sortedProducts() {
      const products = [...this.products]
      switch(this.sortBy) {
        case 'priceAsc':
          return products.sort((a, b) => a.price - b.price)
        case 'priceDesc':
          return products.sort((a, b) => b.price - a.price)
        case 'sales':
          return products.sort((a, b) => b.sales - a.sales)
        default:
          return products
      }
    }
  }
}
</script>

使用排序方法实现

通过方法调用来触发排序，适合需要手动控制排序时机的场景：

<template>
  <div>
    <button @click="sortProducts('price', 'asc')">价格升序</button>
    <button @click="sortProducts('price', 'desc')">价格降序</button>
    <button @click="sortProducts('sales', 'desc')">销量排序</button>

    <div v-for="product in products" :key="product.id">
      {{ product.name }} - 价格: {{ product.price }} - 销量: {{ product.sales }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, sales: 50 },
        { id: 2, name: '商品B', price: 200, sales: 30 },
        { id: 3, name: '商品C', price: 150, sales: 70 }
      ]
    }
  },
  methods: {
    sortProducts(field, order) {
      this.products.sort((a, b) => {
        const valueA = a[field]
        const valueB = b[field]
        return order === 'asc' ? valueA - valueB : valueB - valueA
      })
    }
  }
}
</script>

多条件排序

实现更复杂的多条件排序逻辑，例如先按销量排序，销量相同再按价格排序：

computed: {
  sortedProducts() {
    return [...this.products].sort((a, b) => {
      // 按销量降序
      if (a.sales !== b.sales) {
        return b.sales - a.sales
      }
      // 销量相同则按价格升序
      return a.price - b.price
    })
  }
}

结合Vuex的状态管理

在大型应用中，商品数据可能存储在Vuex中，可以通过getter实现排序：

// store.js
const store = new Vuex.Store({
  state: {
    products: [...]
  },
  getters: {
    sortedProducts: (state) => (sortBy) => {
      const products = [...state.products]
      switch(sortBy) {
        case 'priceAsc':
          return products.sort((a, b) => a.price - b.price)
        case 'priceDesc':
          return products.sort((a, b) => b.price - a.price)
        default:
          return products
      }
    }
  }
})

// 组件中使用
computed: {
  sortedProducts() {
    return this.$store.getters.sortedProducts(this.sortBy)
  }
}