vue点击 多个变颜色

效果：点击 一个添加颜色， 再点击回到默认样式

<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>