<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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;
-moz-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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let data = [{
title: '品牌',
index: -1,
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 in choose">
{{item}}
<a href="javascript:;">x</a>
</mark>
</nav>
<ul id="type">
<li v-for="item,index in dataList">
{{item.title}}:
<a
href="javascript:;"
v-for="option,i in item.list"
v-bind:class="{active: item.index === i}"
@click="addChooseHandle(option,index,i)"
>{{option}}</a>
</li>
</ul>
</section>
</div>
<script type="text/javascript">
/*
{
0:'蘋果',
1:3.0
}
key值不重復
key值就是每一行的下標
思路:用對象來存每一行選中的標簽,把每一行下標作為key值
需要給數據的每一行添加一個屬性,屬性用來記錄選中的標簽
*/
//需要處理data
//item表示data里面的每一個對象
//item.index表示新添的屬性並且屬性的值為-1
data.forEach(item => item.index= -1)
console.log(data);
new Vue({
el:'#wrap',
data: {
dataList: data,
choose: {}
},
methods: {
addChooseHandle: function(option, index, i){
console.log(option,index)
//這樣給對象添加屬性並不會響應
//this.choose[index] = option;
//this.option 對象
//index key值
//option value值
this.$set(this.choose,index,option)
//找到操作的一行,把這一行的數據中的index,設置為點擊的標簽的下標
this.dataList[index].index = i;
}
}
})
</script>
</body>
</html>
