商品分类筛选实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类筛选实现</title>

    <style>
        #section{
            width: 500px;
            margin: 30px auto;
            padding: 30px;
        }
        #choose{
            margin-bottom: 30px;
            width: 100%;
            background-color: #eee;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }
        .item-choose  {
            height: 20px;
            line-height:20px;
            display: inline-block; 
            padding: 0 5px;
            border: 1px solid red;
            font-size: 12px;
            color: red;
            margin-right: 15px;
        }
     
        ul{ 
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-bottom: 20px;
        }
        .item-link{
            text-decoration: none;
            margin: 0 10px;
            color: #333;
        }
        .item-title{
            color: #666;
            font-size: 15px; 
        }
        
    </style>
</head>
<body>
    <div id="wrap">
         <section id="section">
              <nav id="choose" >
                您的选择:
                <span class="item-choose" v-for="item in SELECT_DATA"> 
                    <span v-text='item.name'></span> <a href="javascript:;" @click="deleteItem(item.type)">X</a>
                </span>
              </nav>

              <ul id="type">
                  <li v-for='(item,index) in CART_DATA'  >
                     <span class="item-title" v-text="item.text"></span>: 
                     <a class="item-link" @click="handleSelect(item.type,child)" href="javascript:;" v-for="child in item.content" v-text="child"></a>
                  </li>
              </ul>
         </section>
    </div>
 
    <script src="../../node_modules/vue/dist/vue.js"></script> 
    <script> 
        // 具体的分类数据
        let CART_DATA = [
            {   
                type:1,
                text:'品牌',
                content:['苹果','小米','锤子']
            },
            {
                type:2,
                text:'尺寸',
                content:['3.0英寸以下','3.0-3.9英寸','4.0-4.5英寸']
            },
            {
                type:3,
                text:'系统',
                content:['安卓','IOS','微软']
            },
            {
                type:4,
                text:'网络',
                content:['联通3G','双卡单4G','移动4G']
            }
        ]

        // 选中的数据
        let SELECT_DATA = [
            {
                type:1,
                name:'苹果'
            }
        ]

        let vm = new Vue({
            el: "#wrap",
            data: { 
               CART_DATA,
               SELECT_DATA
            }, 
            methods:{ 
                deleteItem(type){
                    this.SELECT_DATA = this.SELECT_DATA.filter(item=>{
                        return item.type !== type
                    })
                },
                handleSelect(type,name){
                    // 增加之前先进行 是否存在的判断
                    let flag = this.SELECT_DATA.some(item=>item.type == type)
                    // console.log(flag)
                    if(flag){
                        this.SELECT_DATA = this.SELECT_DATA.map(item=>{
                            if(type == item.type){
                                item.name = name
                            }
                            return item;
                        });
                    }else{
                        this.SELECT_DATA.push({
                            type,
                            name
                        })
                    }

                    // 每一次 处理完 把选中的数据进行排序
                    this.SELECT_DATA.sort((A,B)=>{
                        return A.type - B.type
                    })
                  
                }
            },
          
        });

 

    </script>
 
</body>
</html>
posted @ 2021-03-01 15:59  13522679763-任国强  阅读(260)  评论(0)    收藏  举报