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://pwwzsj.com/article/dejcho.html