Vue中通过sort方法实现快速排序
技术:通过sort方法可以实现id ,价格等等想要的快速排序方法。<template><div><div><input type="text" placeholder="商品名称" v-model="queryInfor.name" /></div><table><tr><th>编号//v-if 就是当
·
技术:通过sort方法可以实现id ,价格 等等想要的快速排序方法。
<template>
<div>
<div>
<input type="text" placeholder="商品名称" v-model="queryInfor.name" />
</div>
<table>
<tr>
<th>编号
//v-if 就是当变量flag为true时创建改按钮为非true时删除
//然后绑定点击事件
<button v-if="flag" @click="sortFun">升序</button>
<button v-if="!flag" @click="sortFun">降序</button>
</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr v-for="(item, index) in lcList" :key="index"> //循环遍历的数组
<td>{{ item.id }}</td>
<td>{{ item.goods_name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
</div>
</template>
<script>
import dates from "../../public/data"; //外部导入的数据
export default {
components: {},
data() {
return {
lcList: {},
queryInfor: { //搜索框的变量
name: "",
},
flag: true, //定义显示隐藏的变量
};
},
mounted() {
this.lcList = dates.data; //用自己创建的空对象接受传递过来的值
console.log(this.lcList);
},
methods: {
//排序方法 —— 通过id 要是通过价格的话直接用price替换掉id就可以了
sortFun() {
if (this.flag) {
this.lcList.sort((a, b) => {
return a.id - b.id;
});
} else {
this.lcList.sort((a, b) => {
return b.id - a.id;
});
}
this.flag = !this.flag;
},
},
computed: {},
};
</script>
以下为效果图:(仅供参考)
更多推荐
已为社区贡献3条内容
所有评论(0)