如何实现Vue商城商品筛选器，让用户轻松找到心仪商品？

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

在使用Vue搭建商城项目时，需要实现一个商品筛选器的功能。完成后，再次被Vue的数据驱动强大震撼！首先，我们来了解一下具体的需求。您可以先看看下面的这两张图。

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

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

没有触发时的状态

触发后的状态

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

一、创建筛选器数据结构

跟以前的开发方式不同，我们首先要创建数据结构，而不是编写模版代码。