记得之前用原生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>锤子<a href="javascript:;">x</a></mark> -->
             <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这个对象