记得之前用原生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