Vue实现商品筛选

灰太狼 2022-05-20 01:25 259阅读 0赞

记得之前用原生js实现过这个案例，今天又用vue实现了一下，感觉还是vue实现起来要简单一点

直接看代码：注释上面有解释（后面有些知识点，代码后面会聊，如果会了，就可以不看哦）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>商品筛选</title>
        <style type="text/css">
            body {
                font-size: 14px;
                font-family: "Lantinghei SC Extralight",Arial;
            }
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            a {
                text-decoration: none;
            }
            img {
                vertical-align: top;
            }
            #wrap {
                width: 760px;
                height: 260px;
                margin: 100px auto;
                padding: 145px 120px 95px;
                background: url(img/bg.jpg) no-repeat 0 0;
            }
            #section {
                width: 760px;
                height: 260px;
                -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.2);
                box-shadow: 0px 0px 4px rgba(0,0,0,.2);
            }
            #choose {
                width: 760px;
                height: 50px;
                margin: 0 auto;
                background: url(img/nav_bg.png) no-repeat 0 0;
                line-height: 50px;
                text-indent: 21px;
            }
            #type {
                width: 100%;
                height: 210px;
                background: url(img/type_bg.png) no-repeat 0 0;
                padding: 17px 0 16px 28px;
            }
            #type li {
                height: 44px;
                color: #8a8a8a;
                line-height: 44px;
            }
            #type a {
                margin: 0 12px 0 11px;
                color: #000;
            }
            #choose mark {
                position: relative;
                display: inline-block;
                height: 24px;
                line-height: 24px;
                border: 1px solid #28a5c4;
                color: #28a5c4;
                margin: 12px 5px 0;
                background: none;
                padding: 0 30px 0 6px;
                text-indent: 0;
            }
            #choose mark a {
                position: absolute;
                top: 3px;
                right: 2px;
                display: inline-block;
                width: 18px;
                height: 18px;
                background: #28a5c4;
                color: #fff;
                line-height: 18px;
                font-size: 16px;
                text-align: center;
            }
            .active {
                background: rgb(40, 165, 196);
            }
        </style>
        <script src="../src/vue.js"></script>
        <script type="text/javascript">
            let data = [
                {
                    title: '品牌',
                    list: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", "索尼"]
                },
                {
                    title: '尺寸',
                    list: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"]
                },
                {
                    title: '系统',
                    list: ["安卓", "(", "Android", ")", "苹果", "(", "IOS", ")", "微软", "(", "WindowsPhone", ")", "无", "其他"]
                },
                {
                    title: '网络',
                    list: ["联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G"]
                }
            ]
        </script>
    </head>
    <body>
    <div id="wrap">
        <section id="section">
            <nav id="choose">
                你的选择:
                
                 <mark
                         v-for="item,key in choose"
                         @click="delFn(key)"
                 >
                     {
       {item}}
                     <a href="javascript:;"
                     >x</a>
                 </mark>
            </nav>
            <ul id="type">
                <li
                        v-for="item,i in dataList"
                >
                    {
       {item.title}}：
                    <a
                            v-for="value,j in item.list"
                            href="javascript:;"
                            v-bind:class="{active:item.index===j}"
                            @click="showFn(value,i,j)"
                    >
                        {
       {value}}
                    </a>
                </li>
            </ul>
    
        </section>
    </div>
    <script>
        // 需要处理data
        data.forEach(item=>item.index = -1);
        var vm = new Vue({
            el:"#wrap",
            data:{
                dataList:data,
                choose:{}
            },
            methods:{
                showFn(val,i,j){
                    //下面这种方法给对象添加属性并不会响应
                    // this.choose[i] = val
                    this.$set(this.choose,i,val)
                    //找到操作的一行，把这一行的数据中的index设置为点击的标签的下标
                    this.dataList[i].index = j;
                },
                delFn(key){
                    /*
                    删除对象中的属性
                     */
                    this.$delete(this.choose,key);
                    this.dataList[key].index = -1;
                }
            }
        });
    </script>
    </body>
    </html>

知识点补充：

为Vue中的对象动态添加属性的方法：根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

如果我们想要为choose添加一个新的属性name，像vm.choose.name = "leo";这种写法是不能够更新视图的

在上面的小例子中我们想要为choose对象添加属性，我们采用的方法是$.set()的方法，那下面我们就聊聊为对象动态添加属性的三种方法。

1、Vue.set(target,prop,value)；//调用vue的静态方法

*  设置对象的属性，如果对象是响应的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制

2、vm.$set(target,prop,value);//调用实例上的方法$set

3、vm.choose = Object.assign(\{\},vm.choose,\{name:"donna"\});//替换对象。

使用这种方法需要注意,第一个空对象是不能够少的，因为Object.assign中的第一个对象就是它的返回值，如果我们设置第一个对象为vm.choose,那么其实就相当于直接给choose对象添加属性，这样视图是不会更新的。

var o = Object.assign(vm.choose,{name:"donna"});
    console.log(vm.choose=== o);//true

o这个返回值就是vm.choose这个对象