computed筛选列表案例代码

风继续吹--

已于 2022-09-02 16:28:13 修改

阅读量206

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-30 20:21:55 首次发布

本文链接：https://blog.csdn.net/muY_1925f/article/details/126611564

版权

该博客介绍了如何在Vue.js应用中使用computed属性进行列表的筛选和排序。首先，通过filter方法根据搜索关键字对数据进行过滤。接着，根据用户选择的排序方式（升序、降序或原始顺序）对筛选后的数据进行sort操作。博主提供了完整的JavaScript代码示例，详细阐述了整个逻辑过程。

摘要由CSDN通过智能技术生成

computed筛选列表的逻辑

第一步，搜索，就是将所有数据根据条件进行筛选，筛选出符合条件的，所有，需要经行filter 而筛选的条件就是根据搜索的关键字来进行寻找，找出来后，对其进行返回，然后是排序，排序有三个，一种是从大到小，一种是从小到大，还有一种是原数据排序，这时就需要上面的点击事件绑定一个数，根据条件判断点击的是哪个按钮，进行相应的排序，利用 sort排序，a-b为从小到大，b-a为从大到小，最后返回值即可。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" placeholder="请输入姓名"