vue实现类目筛选功能

效果图如下：

代码如下：

<template>
<div><dl v-for="(listItem,listIndex) in listData" :key="listItem.id"><div class="flex-box"><dt>{{listItem.title}}</dt><dd v-for="(minItem,minIndex) in listItem.list" :key="minItem" :class="minIndex==listItem.index?'active':''" @click="handClick(minItem,listIndex,listItem,minIndex)">{{minItem}}</dd></div></dl><div class="list-box"><h4>你选择的属性:</h4><p v-if="!Object.keys(chooseList).length">暂无选择</p><p class="chooseItem" v-for="(value,key) in chooseList" :key="key">{{value}}<span @click="handleDel(key)">x</span></p></div>
</div>
</template><script>
export default {data() {return {listData: [{title: '品牌',id: 1,list: ['美的', '海尔', '格力', '三星', '惠普', '长虹']},{title: '价格',id: 2,list: ['2000-3000', '2100-2500', '3500-6000', '1000-2000', '1500-4000', '6000-7000']},{title: '制冷面积',id: 3,list: ['120平方米', '130平方米', '140平方米', '150平方米', '160平方米', '170平方米']},],chooseList:{// 0:'美的',//1:'2000-300'，}}},methods: {handClick(minItem,listIndex,listItem,minIndex){listItem.index = minIndexconsole.log(minItem,listIndex,listItem)this.$set(this.chooseList,listIndex,minItem)},handleDel(key){console.log(key)this.$delete(this.chooseList,key)this.listData[key].index = nullconsole.log(this.listData)}},
}
</script><style lang="less" scoped>
.flex-box{display: flex;
}
dl,dd,dt{cursor: pointer;
}
dl{border-bottom: 1px dashed #ccc;
}
dd{margin-left: 10px;
}
dt{background: gray;padding: 4px 10px;color: #fff;
}
.list-box{display: flex;align-items: center;h4{margin-right: 15px;}p{color: #ccc;margin-right: 10px;}.chooseItem{border:1px solid red;padding: 4px 10px;color: red;span{padding-left: 10px;cursor: pointer;}}
}
.active{color: red;
}
</style>

vue实现类目筛选功能相关推荐

vue 点击按钮筛选功能_vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下 1.先上图: 2.搜索条件绑定的数据是: filterForm:{ schoolName:'',//输入的学校名称 ...
2.JAVAEE-电子商城-类目管理模块
文章目录一.实现步骤: 1.后端(6步骤):ItemCategory实体类-->ItemCategory接口-->ItemCategory接口配置文件-->ItemCategory ...
浅谈淘宝类目属性体系：商品搜索背后的逻辑架构
转载自:http://www.geekpark.net/news/205894 摘要淘宝拥有百万家商户和超过10亿的商品数,它如何让用户精准地找到想要的商品呢?其背后有着强大的技术支撑. 淘宝目前在 ...
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
功能点分析：商品类目表
前言作为电商网站,必然要有商品类目表,以便商品分类检索.而设计商品类目表,又是一件特别繁杂的事情.一件商品可能有多个类目来检索出来,比如苹果手机,可以从品牌检索也可以从手机检索.一个类目对应多个商品 ...
Shopee上线全球类目树，类目垂直定位，让商家引流更精准！
Shopee上线全球类目树(Global Tree),提升卖家跨市场上新效率,更新清晰的商品类目结构以适应不断增长的商品种类,并且提供全面的商品属性以优化搜索结果. 一.上新N个不同市场,类目属性编辑 ...
vue实践06-项目实践
vue实践06-项目实践 vue-cli创建项目项目采用Webpack+Vue-router的架构方式,在命令行中,进入项目目录,使用npm install 安装package.json里项目的依赖 ...

vue实现类目筛选功能

vue实现类目筛选功能相关推荐

最新文章

热门文章