Vue.js 是一款流行的前端框架，它提供了许多实用的工具来帮助我们更方便地处理数据。其中，filterBy 和 orderBy 是两个非常有用的指令，可以让我们在列表中进行搜索筛选和排序。
filterBy
filterBy 可以让我们根据指定的属性值对数据进行筛选。假设我们有一个包含多个对象的数组：
data: [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 20 }
]如果我们想要根据姓名进行筛选，可以使用 filterBy 指令：
-- -------------------- ---- -------
------ ---------------------
----
--- ----------- -- ---------------- --------- -------
-----
--------
------ ------- -
------ -
------ -
----- --- --- ----
----------- --
-
--
--------- -
-------------- -
------ ----------------------------------------- ---------------- -------
-
-
-
---------在上面的代码中，我们将输入框的值绑定到 searchName 变量上，并创建一个计算属性 filteredData 来返回筛选后的数据。这里我们调用了 filterBy 过滤器，将 data 数组和 searchName 变量作为参数传递进去，再指定要根据哪个属性进行筛选。
orderBy
orderBy 可以让我们根据指定的属性值对数据进行升序或降序排序。假设我们有一个包含多个对象的数组：
data: [
{ name: 'Alice', score: 80 },
{ name: 'Bob', score: 70 },
{ name: 'Charlie', score: 90 }
]如果我们想要根据分数进行降序排序，可以使用 orderBy 指令：
-- -------------------- ---- -------
------- ------------------------- -- --------------
----
--- ----------- -- -------------- --------- -- - -- ---------- -------
-----
--------
------ ------- -
------ -
------ -
----- --- --- ----
--------- ----
-
--
--------- -
------------ -
------ ---------------------------------------- -------- ------------- - -- - --
-
--
-------- -
------------- -
------------- - --------------
-
-
-
---------在上面的代码中，我们创建了一个按钮来触发排序操作，以及一个计算属性 sortedData 来返回排序后的数据。这里我们调用了 orderBy 过滤器，将 data 数组、要排序的属性名以及升序或降序的标志作为参数传递进去。同时，我们还定义了一个 sortDesc 变量来记录当前的排序状态，并在 sortByScore 方法中切换它的值。
总结
filterBy 和 orderBy 是 Vue.js 中非常有用的指令，可以让我们更方便地进行搜索筛选和排序操作。通过本文的介绍，相信读者已经能够掌握它们的基本用法了。需要注意的是，虽然这两个指令很方便，但是如果处理的数据量过大，可能会导致性能问题，因此在实际项目中需要做好对它们的使用和优化工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2142