javascript - 如何在vue js中单击div时隐藏特定div

Question

<template>
 <div v-for="(item ,index) in items" v-if="showing">
                <span @click="showing=false">{{item.name}}</span>
 </div>
</template>
    <script>

            export default{
                       showing:true,
                       items: [
                          {'name':'a'},
                          {'name':'b'},
                          {'name':'c'},
                       ],
            }
    </script>

如何在单击 div 时隐藏特定 div **当我这样做时，它们都被隐藏了**

Answer 1

我会做这样的事情:

<template>
   <div v-for="(item,index) in items" v-if="hide.indexOf(index) < 0">
     <span @click="hide.push(index)">{{item.name}}</span>
   </div>
</template>  
<script>
  export default{
    hide :[],
    items:[
     {'name':'a'},
     {'name':'b'},
     {'name':'c'}
    ]
  }
</script>

您可以在这里查看https://jsfiddle.net/do68kqje/3/