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

数组排序的实现方法很简单
我们开始最基本的
我们创建项目 引入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>

下面是效果实现图

一个简单的价格排序就完成了