我要评论数组排序的实现方法很简单
我们开始最基本的
我们创建项目 引入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>
下面是效果实现图
一个简单的价格排序就完成了
本文地址：https://blog.csdn.net/Rick_and_mode/article/details/108125762
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论