效果：点击 一个添加颜色， 再点击回到默认样式
<template>
<view class="content">
<view class="box" v-for="(item,index) in items" :key="index" :class="box.includes(item) ? 'bgColor':'' " @click="change(item)">{{item}}</view>
</view>
</template>
<script>
export default {
data() {
return {
box:[],
items:['1','2','3','4','5','6','7','8',],
}
},
onLoad() {
},
methods: {
change:function(e){
if(this.box.includes(e)){
this.box.splice(this.box.indexOf(e),1);
}else{
// 把点击的元素item放入box数组中
this.box.push(e);
}
},
}
}
</script>
<style>
.box{
display: inline-block;
width:30px;
font-size:10px;
height: 30px;
margin:0px 3px;
line-height:30px;
border-radius:50%;
text-align: center;
background: #EBEFF5;
}
.bgColor{
color: white;
background: #72A9D9;
}
</style>
