如何编写Vue商城商品筛选器功能的实现代码？

本文共计3290个文字，预计阅读时间需要14分钟。

在用Vue搭建商城项目时，要实现一个商品筛选器的功能。完成后，再被Vue的数据驱动强大震撼到！首先，让我们看一下下面的需求概述。

plaintext需求概述：

1.商品筛选器应能按类别、品牌、价格等条件筛选商品。

2.筛选结果应实时更新，体现Vue的数据绑定能力。

3.筛选界面设计简洁，易于用户操作。

在使用vue搭建商城项目的时候，要实现一个商品筛选器的功能，在完成之后，再一次被vue的数据驱动的强大感到震撼！

首先，我们来看一下具体的需求吧。你可以先看下面的这两张图，然后再看文字描述，可能会更容易理解。

没有触发时的状态

触发后的状态

我们需求有下面几点：
1、默认情况下，只显示一级菜单，二级菜单不显
2、存在二级菜单的情况下，在二级菜单没有显示的情况下，点击一级菜单，一级菜单的样式发生改变，二级菜单不显示
3、存在二级菜单的情况下，一级菜单已经点击过之后，再点击一级菜单，会显示二级菜单
我们举例子说明一下，当前的一级菜单有默认、有货优先、直营优先，只有默认是含有二级菜单的，比如现在焦点在有货优先上面，那么我们点击默认的时候，不会弹出默认下面的二级菜单，只会改变一级菜单默认的样式（字体和三角形的颜色），当再次点击一级菜单默认的时候，其下面的二级菜单就显示出来了。
需求分析完成后，我们开始编写代码吧。