扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
创新互联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: []
}
] 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网