资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

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

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

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

   在使用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://cdkjz.cn/article/dejcho.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220