Vue实现商品价格筛选

最新推荐文章于 2022-07-17 20:35:45 发布

外下羊.

最新推荐文章于 2022-07-17 20:35:45 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Rick_and_mode/article/details/108587375

当我们遇到电商项目的时候面对不同价格的时候
就需要我把 10 块到20块的商品给单独的筛选出来
页面展示的不同的价格间的商品
在这里插入图片描述

Json数据格式

{
   
   
    "status": "0",
    "msg": "",
    "result": {
   
   
        "count": 8,
        "slider":[
            {
   
   
                "title":"All",
                "low":-1,
                "hight":999999
            },
            {
   
   
                "title":"0.00-100.00",
                "low":0,
                "hight":100
            },
            {
   
   
                "title":"100.00-500.00",
                "low":100,
                "hight":500
            },
            {
   
   
                "title":"500.00-1000.00",
                "low":500,
                "hight":1000
            },
            {
   
   
                "title":"1000.00-2000.00",
                "low":1000,
                "hight":2000
            }
        ],
        "list": [
            {
   
   
                "_id": "58e7050398dab115d336b3f2",
                "productId": "201710007",
                "productName": "自拍杆",
                "salePrice": 39,
                "productImage": "/img/zipai.jpg",
                "productUrl": ""
            },
            {
   
   
                "_id": "58e704ef98dab115d336b3f1",
                "productId": "201710002",
                "productName": "智能插线板",
                "salePrice": 59,
                "productImage": "/img/6.jpg",
                "productUrl"