vue.js (商品分类)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0; pad
·
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; list-style:none; font-style:normal;}
.box{
width:500px;
border:1px solid #000;
margin:100px auto;
}
.box p{
border-bottom:1px solid #000;
padding:10px 0;
}
.box p span{
border:1px solid #000;
margin-right:10px; cursor:pointer
}
.box p span i{ background:#f00; padding:0 5px;}
li{
border-bottom:1px solid #000;
padding:10px 0;
}
a{ text-decoration:none; margin-right:10px;}
a:hover,.in{
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<p>你的选中：<span v-for="x,i in newList"
v-on:click="remove(i)"
>{{x}}<i>X</i></span></p>
<ul>
<li v-for="x,i in dataInfo">
<strong>{{x.title}}：</strong>
<a href="javascript:;"
v-for="y,j in x.list"
v-on:click="add(y,i,j)"
v-bind:class="{in:x.cIndex === j}"
>{{y}}</a>
</li>
</ul>
</div>
<script>
var dataInfo = [
{
title:'品牌',
list:['苹果','三星','华为','小米','oppo','中兴','诺基亚']
},
{
title:'尺寸',
list:['1英寸','2英寸','3英寸','4英寸','5英寸']
},
{
title:'内存',
list:['1GB','2GB','3GB','4GB','5GB']
},
{
title:'网络',
list:['2G网络','双卡单4G','电信4G','移动4G','三网']
}
]
dataInfo.forEach(item => item.cIndex = -1)
</script>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'.box',
data:{
dataInfo,
newList:{}
//newList:[]
/*
newList:{
0:苹果,
1:1英寸
2:1gb
}
*/
},
methods:{
add(a,b,c){
//this.newList.push(a)
//this.newList.b = a
this.$set(this.newList,b,a);
this.dataInfo[b].cIndex = c;
},
remove(a){
//console.log(a)
this.$delete(this.newList,a)
this.dataInfo[a].cIndex = -1;
}
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)