vue.js (商品分类)

最新推荐文章于 2024-09-13 08:17:44 发布

wuko.0

最新推荐文章于 2024-09-13 08:17:44 发布

阅读量3k

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40586654/article/details/81264456

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!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>