如何在Vue中实现商品价格范围（如100-200）的筛选功能？

1. 调整模板的单选按钮配置 #

原来的单选按钮value是单个数值，无法区分区间，我们改成代表明确价格区间的标识字符串：

<div class="filter float-end">
  <label><input
      type="radio"
      v-model="price"
      value="All"
    /> All</label>
  <label><input
      type="radio"
      v-model="price"
      value="0-100"
    /> 0-100</label>
  <label><input
      type="radio"
      v-model="price"
      value="100-200"
    /> 100-200</label>
  <label><input
      type="radio"
      v-model="price"
      value="200+"
    /> 200以上</label>
</div>

<div
  class="column is-12-tablet is-4-desktop is-4-widescreen"
  v-for="product in filteredProducts"
  :key="product._id"
>
  <!-- 商品展示内容 -->
</div>

2. 重写计算属性的过滤逻辑 #

原来的过滤逻辑会把价格同时限定为>=和<=同一个值，导致只能筛选出价格完全匹配的商品。现在根据选中的区间标识编写对应范围的过滤规则：

<script>
export default {
  name: "Products",
  data() {
    return {
      products: [],
      price: "All", // 默认显示全部商品
    };
  },
  computed: {
    ...mapGetters(["isLoggedIn"]),
    filteredProducts() {
      // 复制原数组，避免直接修改源数据
      let tempProducts = [...this.products];

      if (this.price === "All") return tempProducts;

      // 根据选中的区间匹配过滤条件
      switch (this.price) {
        case "0-100":
          tempProducts = tempProducts.filter(item => item.price >= 0 && item.price <= 100);
          break;
        case "100-200":
          // 可根据需求调整是否包含100临界值，比如改成>=100
          tempProducts = tempProducts.filter(item => item.price > 100 && item.price <= 200);
          break;
        case "200+":
          tempProducts = tempProducts.filter(item => item.price > 200);
          break;
      }

      return tempProducts;
    }
  },
};
</script>

关键修改说明 #

• 用区间标识字符串替代单个数值作为单选按钮的value，明确区分不同筛选范围
• 计算属性中通过switch分支处理不同区间的过滤逻辑，精准匹配价格范围
• 复制原数组进行过滤操作，避免污染源数据

可选：支持多区间复选框筛选 #

如果需要同时选中多个价格区间（比如同时显示0-100和200+的商品），可以改成复选框实现：

模板修改

<div class="filter float-end">
  <label><input
      type="checkbox"
      v-model="selectedRanges"
      value="All"
    /> All</label>
  <label><input
      type="checkbox"
      v-model="selectedRanges"
      value="0-100"
    /> 0-100</label>
  <label><input
      type="checkbox"
      v-model="selectedRanges"
      value="100-200"
    /> 100-200</label>
  <label><input
      type="checkbox"
      v-model="selectedRanges"
      value="200+"
    /> 200以上</label>
</div>

脚本修改

data() {
  return {
    products: [],
    selectedRanges: ["All"],
  };
},
computed: {
  ...mapGetters(["isLoggedIn"]),
  filteredProducts() {
    if (this.selectedRanges.includes("All")) return [...this.products];

    let result = [];
    this.selectedRanges.forEach(range => {
      switch (range) {
        case "0-100":
          result.push(...this.products.filter(item => item.price >=0 && item.price <=100));
          break;
        case "100-200":
          result.push(...this.products.filter(item => item.price >100 && item.price <=200));
          break;
        case "200+":
          result.push(...this.products.filter(item => item.price >200));
          break;
      }
    });
    // 对结果去重，避免商品被多个区间重复匹配
    return [...new Set(result)];
  }
}

内容的提问来源于stack exchange，提问作者xander