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

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都做网站、丰镇网络推广、成都小程序开发、丰镇网络营销、丰镇企业策划、丰镇品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联为所有大学生创业者提供丰镇建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

小编给大家分享一下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: []
  }
]

名称栏目：vue如何实现商城中商品“筛选器”功能-创新互联
文章转载：http://csruizhi.cn/article/dejcho.html