用vue仿淘宝商品筛选

css略，点击牛仔裤添加到已选条件，点击x取消选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="./index.css">
</head>
<body><div id="app"><divclass="goods"v-for = "(goods,goodsIndex) in goodsList":key = "goods.id"><div class="title">{{ goods.title }}:</div><ul class="type-list"><li class="type":class = "{active:typeIndex === goods.index}"v-for = "(type,typeIndex) in goods.typeList":key = "type"@click = "handleclick(typeIndex,goods,type,goodsIndex)">{{ type }}</li></ul></div><divclass="choose-type"        ><div>已选条件</div><span class="no-goods"v-if = "!showFiltergoods">暂时没有商品</span><ul class="filter-list"v-else ><li v-for = "(goods,goodsKey) in filterList">{{ goods }}<span class="delete-goods"@click = "deleteFilterGoods(goodsKey)">x</span></li></ul></div></div><script>const vm = new Vue({el:"#app",data:{filterList:{},showFiltergoods:false,goodsList: [{title: '上装',typeList: ['全部', '针织衫', '毛呢外套', 'T恤', '羽绒服', '棉衣', '卫衣', '风衣' ],id: 1,},{title: '裤装',typeList: ['全部', '牛仔裤', '小脚/铅笔裤', '休闲裤' ,'打底裤', '哈伦裤'],id: 2,},{title: '裙装',typeList: ['全部', '连衣裙', '半身裙', '长袖连衣裙', '中长款连衣裙'],id: 3,}
]},methods:{handleclick(typeIndex,goods,type,goodsIndex){if(type === "全部"){return;}this.showFiltergoods = true;goods.index = typeIndex;// this.filterList.splice(goodsIndex,1,type);vm.$set(this.filterList,goodsIndex,type)},deleteFilterGoods(goodsKey){// this.filterListthis.$delete(this.filterList,goodsKey);this.goodsList[goodsKey].index = 0;this.changeShowFilter();},changeShowFilter(){const filterListStr =JSON.stringfy(this.filterList);this.showFiltergoods=filterListStr !== "{}"}}})vm.goodsList.forEach(item => vm.$set(item,'index',0));</script></body>
</html>

用vue仿淘宝商品筛选相关推荐

vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发依赖 compile 'com.nineold ...
仿淘宝商品界面（html div+css)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
Android开发之仿淘宝商品详情页
看到有人在问如何实现淘宝商品详情页效果,手痒了就撸了一个,献上效果图大致梳理一下思路,这里不提供源码状态栏透明使用开源库StatusBarCompat,为了兼容手机4.4 dependencies ...
仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.
仿淘宝商品浏览界面，向上拉查看详情
最新项目中有展示类似淘宝商品详情的功能,主要实现向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/d ...
vue.js客服系统实时聊天项目开发（十八）仿淘宝商品页面点在线客服传递产品卡片...
我们在使用淘宝的时候,在商品页面点击在线客服,跳转到客服聊天页以后,会浮动出当前产品信息,可以把产品信息发给客服现在我们也实现了类似功能,可以带着产品信息进聊天页面在访客聊天连接中,加入extra ...
仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动上代码 html代码 <div class="swiper-con ...

用vue仿淘宝商品筛选

用vue仿淘宝商品筛选相关推荐

最新文章

热门文章