tab切换vue
实现联动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#app {
overflow: hidden;
margin-top: 30px;
}
#app>div {
float: left;
padding-left: 43px;
font-size: 20px;
}
#app>ul {
margin-top: 30px;
}
#app>ul>li {
width: 45px;
line-height: 25px;
height: 160px;
text-align: center;
margin-top: 10px;
float: left;
margin: 0 2px 0 37px;
}
#app>ul>li>p {
padding: 10px 0 0 0;
}
.active {
color: violet;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item,index) in list" :key="index" v-on:click='a(index)' v-bind:class="{active:index==num}">
{{item.tab}}
</div>
<ul>
<li v-for="(items,index1) in list" :key="index1">
<p v-for="(lies,index2) in items.lis" :key="index2" v-show="index1==num">
<span v-on:click='b(lies,index1)'>{{lies}}
</span>
</p>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
show: true,
num: 0,
list: [{
tab: '区域',
lis: ['南阳', '洛阳', '信阳', '濮阳'],
}, {
tab: '价格',
lis: ['20w', '30w', '100w', '300w'],
}, {
tab: '房型',
lis: ['二室', '三室', '四室', '六室'],
}, {
tab: '朝向',
lis: ['朝东', '朝南', '朝西', '朝北']
}
]
},
methods: {
a(i) {
this.num = i
},
b(is, index) {
this.list[index].tab = is
},
}
})
</script>
</body>
</html>