<template>
<div>
<div class="box">
<ul>
<li
class="all"
@click="arrayAll()"
:class="listAll.length > 0 ? 'style' : 'hstyle'"
>
全部
</li>
<li
v-for="(item, index) in list"
:key="index"
class="box2"
@click="clickList(item.id)"
>
<div class="names" :class="{ active: listAll.includes(item.id) }">
{{ item.name }}
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
list: [
{ name: '侵权', id: 1 },
{ name: '阿萨', id: 2 },
{ name: '俩年', id: 3 },
{ name: '屏幕', id: 4 },
{ name: '请问', id: 5 },
{ name: '明年', id: 6 },
{ name: '你还', id: 7 },
{ name: '碍难', id: 8 },
{ name: '里面', id: 9 }
],
listAll: []
}
},
methods: {
clickList (id) {
const ids = this.listAll.indexOf(id)
if (ids !== -1) {
this.listAll.splice(ids, 1)
} else {
this.listAll.push(id)
}
},
arrayAll () {
let add = this.listAll
if (add.length > 0) {
add = []
}
this.listAll = add
console.log(this.listAll)
}
}
}
</script>
<style>
li {
list-style: none;
}
ul {
display: flex;
}
.box {
width: 100%;
height: 500px;
margin: 0 auto;
}
.box2 {
margin-left: 50px;
width: 140px;
height: 30px;
}
.names {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 20px;
background-color: rgb(219, 212, 212);
cursor: pointer;
}
.all {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 20px;
background-color: rgb(219, 212, 212);
cursor: pointer;
}
.active {
background-color: #005ad5;
color: #fff;
}
.hstyle {
background-color: #005ad5;
color: #fff;
}
.style {
background-color: #f7f7f7;
color: #adadad;
}
</style>