Vue.js 购物车新手入门之一价格数组排序

刺骨的言语ヽ痛彻心扉 2021-07-24 16:11 465阅读 0赞

**数组排序的实现方法很简单**  
我们开始最基本的  
我们创建项目 引入json 和 axios请求本地数据

## Axios 引入方法 ##

在小黑框输入下面代码

npm install axios --save

在mian.js 中引入axios

import axios from 'axios'
    Vue.prototype.$axios = axios

我先写一个简单布局\`\`

<template> <div> <ul>  <li @click="shen">价格升序</li> <li @click="jiang">价格降序</li> </ul>  <div v-for="(item,index) in list" :key="index">{ { item.jiage}}</div>
      </div>
    </template>

因为需要展示数据我自己写了一个本地JSON

{ 
        "list": [
            { 
                "jiage": 12
            },
            { 
                "jiage": 24
            },
            { 
                "jiage": 36
            },
            { 
                "jiage": 48
            },
            { 
                "jiage": 60
            }
        ]
    }

然后开始在Script里写方法

<script>
    import axios from "axios";//引入 export default { 
      data() { 
        return { 
          list: [], //遍历数据
          sort: true,   //判断数据
        };
      }, created() { 
        //请求json axios.get("http://localhost:8080/list.json").then((res) => { 
          this.list = res.data.list;
          console.log(res.data.list);
        });
      }, methods: { 
        //价格升序 shen() { 
          this.sort = !this.sort; if (this.sort) { 
            this.list.sort((a, b) => { 
              return a.jiage - b.jiage; //根据价格
            });
          } else { 
            this.list.sort((a, b) => { 
              return b.jiage - a.jiage;
            });
          }
        }, jiang() { 
        //价格降序
            this.sort = !this.sort; if (this.sort) { 
            this.list.sort((a, b) => { 
              return b.jiage - a.jiage;
            });
          } else { 
            this.list.sort((a, b) => { 
              return a.jiage - b.jiage;
            });
          }
        },
      },
    };
    </script>

下面是效果实现图  
![在这里插入图片描述][20200820162917190.gif_pic_center]  
一个简单的价格排序就完成了

[20200820162917190.gif_pic_center]: /images/20210724/ef3d6bdae8164a68864d014a1b0b288a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，465人围观）

还没有评论，来说两句吧...

相关阅读

相关商品修改以后，购物车里面的价格是怎么处理的?

答：该问题假设的情景是用户添加了一件商品，那么此时商品价格修改了。此时下订单以什么为准？该问题分为下订单前和下订单后。 a>一旦下了订单，那么订单中就有了该商品的金额，及时修

末蓝、/ 2023年10月14日 12:02/ 0 赞/ 21 阅读

相关购物车

面向数据的操作自我总结：特重要 // 对数据的操作全部根据id(唯一标识符)，来对数据的一系列操作 // 每一次操作都和数据中的id唯一标识符离不开，要对数据进行

系统管理员/ 2022年12月29日 09:41/ 0 赞/ 256 阅读

相关前端学习代码实例-JavaScript商城购物车价格自动计算功能

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 分享一段代码实例，它实现购物车价格自动计算功能。代码实例如下: <!DO

短命女/ 2022年10月01日 13:51/ 0 赞/ 21 阅读

相关简单的购物车和购物车结算

购买部分 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="

比眉伴天荒/ 2022年06月09日 10:09/ 0 赞/ 377 阅读

相关购物车）

效果：首页面的效果 ![Center][] 购物车的效果： ![Center 1][] 我的效

绝地灬酷狼/ 2022年06月07日 11:54/ 0 赞/ 366 阅读

相关购物车

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

小灰灰/ 2022年05月15日 03:12/ 0 赞/ 349 阅读

相关购物车实现

[https://note.youdao.com/share/?id=fdc2f7f71349a5c38434d2802faa6552&type=note\/][https_n

绝地灬酷狼/ 2022年05月08日 06:38/ 0 赞/ 407 阅读

相关 javascript购物车

购物车 <style type="text/css"> body,html{ background-color: whitesmok

快来打我*/ 2022年01月23日 13:53/ 0 赞/ 416 阅读

相关购物车（注册、登录、购物、购物车、结帐）

shopping\_car\_dict=dict() money=\[0\] def input\_username\_pwd(): username=input(

冷不防/ 2021年10月19日 04:10/ 0 赞/ 593 阅读

相关 Vue.js 购物车新手入门之一价格数组排序

数组排序的实现方法很简单我们开始最基本的我们创建项目引入json 和 axios请求本地数据 Axios 引入方法在小黑框输入下面代码 npm

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 16:11/ 0 赞/ 466 阅读