vue如何实现商城中商品“筛选器”功能-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

小编给大家分享一下vue如何实现商城中商品“筛选器”功能，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨方法吧！

vue商城中商品“筛选器”功能的实现

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

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

没有触发时的状态

触发后的状态

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

一、创建筛选器数据结构

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

1、设置筛选器数据结构

// 数据源
optionsDatas: [
  {
   id: '1',
   name: '默认',
   subs: [
    {
     id: '1',
     name: '默认',
    },
    {
      id: '1-2',
      name: '价格由高到低',
    },
    {
      id: '1-3',
      name: '销量由高到低',
    },
    ]
  },
  {
   id: '2',
   name: '有货优先',
   subs: []
  },
  {
   id: '3',
   name: '直营优先',
   subs: []
  }
]