效果：點(diǎn)擊 一個添加顏色， 再點(diǎn)擊回到默認(rèn)樣式
<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{
? ? ? ? ? ? ? ? ? ? // 把點(diǎn)擊的元素item放入box數(shù)組中
? ? ? ? ? ? ? ? ? ? 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>
