vue框架写商品筛选（有什么写的不好的地方，请评论）

1. 显示效果
   
   2.html

<div id="app">
        <div class="xuanzhong">
            <span>你的选择：</span>
            <ul>
                <li v-for="item,i in xuanzhong"><span v-text="item"></span><strong v-on:click="shanchu(i)">X</strong></li>
            </ul>
        </div>
        <div class="kexuan">
            <ul>
                <li v-for="item,i in dataList">
                    <span v-text="item.title"></span>
                    <ul>
                        <li v-bind:style="{background:dataList[i].index==j?'#faf':''}" v-on:click="dianji(i,j,opt)"
                            v-for="opt,j in item.list" v-text="opt.sub"></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

3.css

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #app {
            width: 650px;
            margin: 100px auto 0;
            overflow: hidden;
            border: 1px solid #f1f;
        }

        .xuanzhong {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
        }

        .xuanzhong span {
            float: left;
        }

        .xuanzhong ul li {
            float: left;
            width: 110px;
            height: 20px;
            border: 1px solid #faf;
            text-align: center;
            margin: 10px 5px;
        }

        .xuanzhong ul li span {
            float: left;
            width: 90px;
            height: 20px;
            line-height: 20px;
            background: rgb(228, 56, 150);
        }

        .xuanzhong ul li strong {
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background: rgb(93, 211, 226);
            cursor: pointer;
        }

        .kexuan {
            width: 600px;
            margin: 10px auto;
            line-height: 40px;
        }

        .kexuan>ul>li>span {
            float: left;
        }

        .kexuan>ul>li {
            width: 600px;
            height: 40px;
        }

        .kexuan>ul>li>ul>li {
            float: left;
            margin: 0 5px;
            cursor: pointer;
        }
    </style>

4.js

var vm = new Vue({
            el: '#app',
            data: {
                dataList,
                index: -1,
                xuanzhong: {}
            },
            methods: {
                dianji(i, j, opt) {
                    this.$set(this.xuanzhong, i, opt.sub);
                    this.dataList[i].index = j;
                },
                shanchu(i) {
                    this.$delete(this.xuanzhong, i);
                    this.dataList[i].index = -1;
                }
            }
        })

5.数据

var dataList = [{
                title: "品牌:",
                list: [{
                        sub: "苹果"
                    },
                    {
                        sub: "小米"
                    },
                    {
                        sub: "华为"
                    },
                    {
                        sub: "魅族"
                    },
                    {
                        sub: "黑莓"
                    },
                    {
                        sub: "锤子"
                    }
                ]
            },
            {
                title: "大小:",
                list: [{
                    sub: "3.0"
                }, {
                    sub: "4.0"
                }, {
                    sub: "5.0"
                }, {
                    sub: "6.0"
                }]
            },
            {
                title: "价格:",
                list: [{
                        sub: "0~500"
                    },
                    {
                        sub: "500~1000"
                    },
                    {
                        sub: "1000~1500"
                    },
                    {
                        sub: "1500~2000"
                    },
                    {
                        sub: "2000~2500"
                    },
                    {
                        sub: "2500~3000"
                    }
                ]
            },
            {
                title: "内存:",
                list: [{
                        sub: "32G"
                    },
                    {
                        sub: "64G"
                    },
                    {
                        sub: "128G"
                    },
                    {
                        sub: "256G"
                    },
                    {
                        sub: "512G"
                    },
                    {
                        sub: "1024G"
                    }
                ]
            }
        ];
        // 数据处理
        dataList.forEach((item) => (item.index = -1))