VUE实现移动端列表筛选功能

最近兴趣所致，打算使用栈搭建一个webapp，由于需要使用列表筛选，没有找到合适组件，于是写了一个简单的功能，权当记录。

效果如下：

HTML:

div class=' filter bar ' div class=' filter bar-title ' ul class=' title-ul ' Li : class=' { ' title-Li ' : true，' current ' : item。is show }“v-for=”(项目，索引)在bar menu ' : key=' index ' span @ click=' handerClickMenu(item)' { { item。{ name } } van-icon : name=' item。isshow？向上箭头' : '向下箭头'//span div class='筛选器栏-内容' v-:单击。停止v-if='项。is show ' ul class=' content-ul ' Li v-for=' item。data ' : key=' number ' : class=' { ' current ' : child。所选}“@ click=”HandReclickContent(项，子)“{{child.name}} van-icon v清空/范-巴顿范-巴顿类型=' info ' @单击='search '确定/van-button/div/div/Li/ul/div class=' BG-filter bar ' v-if=' isbgffilterbar show ' @ click=' handerClickMenu '/div/div CSS 3:filterbar {位置：固定；z-index : 2；左： 0；top: 3.1em毫米宽度： 100%;背景-color : # fff；height: 2em .bg-filterbar {位置：固定；宽度： 100%;高度： 100%;背景-颜色：黑色；opa city 3360 0.2z-指数： 1；左： 0；top: 4.2em}。过滤栏-标题{宽度： 100%；title-ul { height : 1.4 em；保证金-底部： 0.5 em边框-底部： 1px实心# eee} ul .标题-李{宽度： 24%；向左浮动：文本对齐：中心；font-size : 0.9 em。过滤栏-内容{位置：绝对；左： 0；宽度： 100%;padding: 0.5em背景-color : # fff；z-index : 2；top: 1.24em}。content-ul Li { text-align : left；color : # 111 font-weight : 400；左填充left : 1.5 empadding-top : 0.7 em；} .内容-ul .当前{ color: # 1989fa} ul .当前{ color : # 1989 font-weight : 600；} ul :在{内容： }之后；显示器：块；clear:两者；} .内容-ul .面包车图标{ float:右侧；右边距： 2.5 em} ul .van-icon {垂直-对齐： 中间；} } .button-div { margin-top : 1.5 em；文本对齐：中心；按钮{宽度： 48%；向左浮动：} .van-button { height : 3em；线高： 3emfont-size : 1em字体粗细： 400；} } }JS:

脚本导出默认{ data(){ return { bar menus 3360 [{ name : } }菜系，value: 1，isShow: false，multiple: true，data: [ { name: '川菜，value: 1，selected: false }，{ name: '粤菜，value: 2，selected: false }，{ name: '湘菜，值： 3，selected: false }，{ name: '苏菜，值： 4，selected: false }，{ name: '闽菜，value: 5，selected: false }，{ name: '徽菜，value: 6，selected: false }，{ name: '浙菜，value: 7，selected: false }，{ name: '鲁菜，value: 8， selected: false } ] }，名称为： '口味，value: 2，isShow: false，multiple: true，data: [ { name: '清淡，value: 1，selected: false }，{ name: '麻辣，value: 2，selected: false }，{ name: '养生，值： 3，selected: false } ] }，名称： '适合人群，value: 3，isShow: false，multiple: true，data: [ { name: '老人，value: 1，selected: false }，{ name: '婴儿，value: 2，selected: false }，{ name: '小孩，value: 2，selected: false }，{ name: '病人，value: 2，selected: false } ] }，name: '排序，值： 4，isShow: false，multiple: false，data: [ { name: '做过最多，value: 1，selected: false }，{ name: '点赞最多，value: 2，selected : false }]}]}； }，计算出： { isbgffilterrbarshow : { get(){ let isBgShow=false；this.barMenus.forEach(函数(当前值，索引，arr){ if(当前值。is show){ ISbGshow=true；} });回报是痛击；} }，方法： { search(){ this。hAnDerclose()；}，handerClose(){ this。巴梅纳斯。foreach(函数(currentValue，index，arr){ currentValue。issshow=false});}，handerClickMenu(项){ if(！item){ return；} this.barMenus.forEach(函数(当前值，索引，arr){ if(当前值。值==项目。value){ currentValue。isshow=！current value . isshow } else { current value。IsShow=false} });}，handerClickContent(项，子){ if(！项目。多重){这个。hAnDreclear(项目)；this.handerClose(项目);} child.selected=！child.selected}，HandReclear(item){ item。数据。foreach(函数(当前值、索引、arr){当前值。selected=false});} }};/script参数说明：

名称：筛选项显示名称值：筛选项代码显示：是否显示multiple:是否多选，为真实的时会有清空和确定功能按钮数据：筛选列表项

总结

以上所述是小编给大家介绍的VUE实现移动端列表筛选功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！