用vue仿淘宝商品筛选

最新推荐文章于 2024-04-29 18:00:05 发布

啥时候能干全栈

最新推荐文章于 2024-04-29 18:00:05 发布

阅读量2.5k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42177478/article/details/105168230

版权

vue 专栏收录该内容

27 篇文章 6 订阅

订阅专栏

在这里插入图片描述
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">
        <div
            class="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>
        <div
        class="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.filterList
                    this.$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>

啥时候能干全栈

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
用vue仿淘宝商品筛选

css略，点击牛仔裤添加到已选条件，点击x取消选择<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫