当我们遇到电商项目的时候面对不同价格的时候
就需要我把 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": ""
            },
            {
                "_id": "58c284d7117a2e6599abef5e",
                "productId": "201710004",
                "productName": "头戴式耳机-3",
                "salePrice": 80,
                "productImage": "/img/2.jpg",
                "productUrl": ""
            },
            {
                "_id": "58e7058498dab115d336b3fc",
                "productId": "201710017",
                "productName": "小钢炮蓝牙音箱",
                "salePrice": 129,
                "productImage": "/img/1.jpg",
                "productUrl": ""
            },
            {
                "_id": "58e7058d98dab115d336b3fd",
                "productId": "201710018",
                "productName": "智能摄像机",
                "salePrice": 389,
                "productImage": "/img/photo.jpg",
                "productUrl": ""
            },
            {
                "_id": "58e7057798dab115d336b3fb",
                "productId": "201710016",
                "productName": "Ear700",
                "salePrice": 700,
                "productImage": "/img/16.jpg",
                "productUrl": ""
            },
            {
                "_id": "58e7051698dab115d336b3f4",
                "productId": "201710009",
                "productName": "IH 电饭煲",
                "salePrice": 999,
                "productImage": "/img/9.jpg",
                "productUrl": ""
            },
            {
                "_id": "58e7052a98dab115d336b3f6",
                "productId": "201710011",
                "productName": "Ear1000",
                "salePrice": 1000,
                "productImage": "/img/11.jpg",
                "productUrl": ""
            }
        ]
    }
}

Home页面

<template>
  <div class="tt">
    <div class="box">
      <i class="el-icon-shopping-cart-2" @click="Get">
        <span>{{Cartlist.length}}</span>
      </i>
    </div>
    <div class="box_top">
      <!-- 价格排序 -->
      <i class="el-icon-top" @click="index">sort</i>
      <i class="el-icon-bottom" @click="index1">sort</i>
    </div>
    <div class="box_centre">
      <!-- 左边价格筛选 -->
      <div class="box_centre_left">
        <ul class="box_centre_left_ul">
          <li
            class="li"
            v-for="(item,index) in price"
            :key="index"
            @click="Onclick(item,index)"
            :class="{'box_centre_left_li':left==index}"
          >{{item.title}}</li>
        </ul>
      </div>
      <!-- 右边商品 -->
      <div class="box_centre_right" ref="box_height">
        <el-row>
          <el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in list " :key="index">
            <div class="box_centre_right_bos">
              <img :src="item.productImage" alt />
              <p>{{item.productName}}</p>
              <p>￥{{item.salePrice}}</p>
              <el-row>
                <el-button type="success" @click="click(item)">加入购物车</el-button>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 底部loadging加载 -->
    <div class="box_footer_loadging" v-show="isShow">
      <img
        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3681478079,2138136230&fm=26&gp=0.jpg"
        alt
      />
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      isShow: false, //加载图
      list: [],
      price: [],
      list1: [],
      left: -1, //筛选样式
      sort: true, //排序
      Cartlist: [],
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      this.list = res.data.result.list;
      this.list1 = res.data.result.list;
      this.price = res.data.result.slider;
    });
    //
    this.Cartlist = this.$store.state.CartList;
    console.log(this.Cartlist);
    //下拉加载
    this.$refs.box_height.addEventListener("scroll", () => {
      var clientHeight = document.documentElement.clientHeight;
      var scrollTop = document.documentElement.scrollTop;
      var scrollHeight = document.documentElement.scrollHeight;
      if (scrollHeight - scrollTop - clientHeight < 1) {
        this.isShow = true;
        window.setTimeout(() => {
          this.$axios.get("http://localhost:8080/data2.json").then((res) => {
            this.list = [...this.list, ...res.data.result.list];
          });
          this.isShow = false;
        }, 3000);
      }
    });
  },
  methods: {
    //筛选
    Onclick(item, index) {
      this.list = [];
      this.left = index;
      this.list1.forEach((ele) => {
        if (item.low <= ele.salePrice && ele.salePrice <= item.hight) {
          this.list.push(ele);
        }
      });
    },
    index() {
      //排序
      this.sort = !this.sort;
      if (this.sort) {
        this.list.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      } else {
        this.list.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      }
    },
    index1() {
      this.sort = !this.sort;
      if (this.sort) {
        this.list.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      } else {
        this.list.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      }
    },
    //点击添加购物车
    click(item) {
      Dialog.confirm({
        message: "是否加入购物车",
      })
        .then(() => {
          this.$store.dispatch("onclick", item);
        })
        .catch(() => {
          // on cancel
        });
    },
    //跳转购物车
    Get(){
      this.$router.push({
        path:"/About"
      })
    }
  },
};
</script>
<style  scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tt {
  width: 98%;
  background: rgb(247, 248, 250);
}
.box {
  width: 100%;
  height: 9vh;
  text-align: right;
  line-height: 9vh;
}
.box_top {
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  text-align: right;
}
.box_centre {
  width: 100%;
  height: 80vh;
  display: flex;
}
.box_centre_left {
  width: 20%;
  height: 80vh;
  background: rgb(247, 248, 250);
}
.box_centre_right {
  width: 79%;
  height: 80vh;
  overflow: scroll;
}
.box_centre_right::-webkit-scrollbar {
  display: none;
}
.box_centre_right_bos {
  height: 50vh;
  text-align: center;
  border: 1px solid gainsboro;
}
.box_centre_right_bos img {
  width: 100%;
  height: 50%;
}
.box_footer_loadging {
  width: 100%;
  height: 100px;
}
.box_footer_loadging img {
  width: 100px;
  height: 100px;
  margin-left: 45%;
}
.box_centre_left_ul li {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.box_centre_left_li {
  border-left: 3px solid red;
  font-size: 15px;
  text-align: left 10px;
}
.li {
  font-size: 15px;
  color: rgb(161, 159, 159);
}
</style>