随着前端技术的不断发展，作为流行的前端框架之一的 Vue.js 已经成为越来越多项目的首选。而按条件筛选是一个常见的需求，比如商品的价格筛选、新闻的时间筛选等等。本文将详细介绍 Vue.js 实现按条件筛选的方式，并通过示例代码指导读者实现一个完整的筛选组件。
1. 数据准备
首先，我们需要有一些数据供我们筛选。在这个例子中，我们以商品价格为例，有以下数据：
[
{ id: 1, name: '商品1', price: 10 },
{ id: 2, name: '商品2', price: 20 },
{ id: 3, name: '商品3', price: 30 },
{ id: 4, name: '商品4', price: 50 },
{ id: 5, name: '商品5', price: 100 }
]2. 创建筛选组件
接下来，我们需要创建一个筛选组件，用来呈现筛选条件和进行筛选操作。在示例代码中，我们创建了一个 Filter 组件。这个组件包含一个下拉框和一个按钮，用来选择和执行筛选操作。
-- -------------------- ---- -------
----------
-----
------- ------------------------
------- -------- -------------------------
------- --------------- ------ -- ------------- ------------ ------------------------------ ------------ -----------
---------
------- ----------------------------------
------
-----------在这个组件的 data 中，我们定义了以下变量：
-- -------------------- ---- -------
------ -
------ -
-------------- ---
------------- -
- ------ ----- ------ --- -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ------ ------ --- -- -- --
-
-
-这个组件的作用是让用户选择价格区间，当用户点击筛选按钮时，根据选择的价格区间，筛选出对应的商品。
3. 实现筛选功能
在 Filter 组件中，我们定义了 selectedPrice 变量用来记录用户选择的价格区间。那么，如何将这个价格区间应用到商品列表上呢？
首先，我们需要将商品列表传递给 Filter 组件。在示例代码中，我们将商品列表设置为 products 属性，通过父组件传递给 Filter 组件。
-- -------------------- ---- -------
----------
-----
------- ------------------------
------- -------- -------------------------
------- --------------- ------ -- ------------- ------------ ------------------------------ ------------ -----------
---------
------- ----------------------------------
------
-----------
--------
------ ------- -
------ -
--------- -
----- ------
-------- -- -- --
-
--
------ -
------ -
-------------- ---
------------- -
- ------ ----- ------ --- -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ------ ------ --- -- -- --
-
-
--
-------- -
--------------- -
-- ------------------- --- --- -
----- ------------- - --------------------------
--------------------- - ---------------------------- -- -
-- -------------- --- --- -
------ ------------- - --
- ---- -- -------------- --- --- -
------ ------------- -- -- -- ------------- -- --
- ---- -- -------------- --- --- -
------ ------------- - -- -- ------------- -- --
- ---- -
------ ------------- - --
-
--
-
-
-
-
---------在 filterByPrice 方法中，我们首先判断用户是否选择了价格区间，如果选择了，我们将选择的价格区间转换为数字，并对商品列表进行过滤。过滤逻辑如下：
- 如果选择的价格区间为“小于 10 元”，返回价格小于 10 元的商品。
- 如果选择的价格区间为“10 - 20 元”，返回价格在 10 元到 20 元之间的商品。
- 如果选择的价格区间为“20 - 50 元”，返回价格在 20 元到 50 元之间的商品。
- 如果选择的价格区间为“大于 50 元”，返回价格大于 50 元的商品。
最终，我们得到了一个可以根据价格区间筛选商品的完整示例代码：
-- -------------------- ---- -------
----------
-----
------- ------------------------
------- -------- -------------------------
------- --------------- ------ -- ------------- ------------ ------------------------------ ------------ -----------
---------
------- ----------------------------------
----
--- -------------- -- ----------------- -------------------- ------------ -- - -- ------------- -- ------
-----
------
-----------
--------
------ ------- -
------ -
--------- -
----- ------
-------- -- -- --
-
--
------ -
------ -
-------------- ---
------------- -
- ------ ----- ------ --- -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ----- ------ --- - -- -- --
- ------ ------ ------ --- -- -- --
--
----------------- -------------
-
--
-------- -
--------------- -
-- ------------------- --- --- -
----- ------------- - --------------------------
--------------------- - ---------------------------- -- -
-- -------------- --- --- -
------ ------------- - --
- ---- -- -------------- --- --- -
------ ------------- -- -- -- ------------- -- --
- ---- -- -------------- --- --- -
------ ------------- - -- -- ------------- -- --
- ---- -
------ ------------- - --
-
--
-
-
-
-
---------总结
本文介绍了 Vue.js 如何实现按条件筛选功能。我们首先准备了一些商品数据，然后创建了一个 Filter 组件用来选择价格区间并筛选商品。最后，我们实现了筛选功能，将商品列表根据价格区间进行过滤并显示筛选结果。通过这个示例，读者可以学习到 Vue.js 组件的创建和数据绑定，以及如何根据条件筛选数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c37c4968c7c53b0b3fbfe