vue实现在for循环的列表中点击里面的设置控制显示隐藏

<template>
    <div class="box" v-for="(item,$index) in itemList" @click="showSetting">
        <div class="settingCon" @click="settingEvent($event)">
            <span @click="clickSetting($index)">设置</span>
            <div v-show="$index == i">显示设置内容</div>
        </div>
    </div>
</template>
<script>
   export default {
       data(){
           return{
               i:-1, 
           } 
       },
       methods:{
           showSetting(){
               this.i = -1;
           },
           settingEvent(event){
               event.stopPropagation(); //此区域不受上面方法的影响
           },
           clickSetting(index){
             if(this.i !== -1){
                this.i = -1;
              }else{
                this.i = index;
             }
           }
       }
   }
</script>