当我在 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

暂时没有用过 Vue，所以这可能行不通，但应该是一个很好的指导。

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

Answer 2

我会做这样的事情：

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

Answer 3

如果您不想使用其他数组来保留隐藏索引（如 hide :[]）：

new Vue({
    el: "#app",
      data: function() {
    return {
      items:[ {'name':'a'}, {'name':'b'}, {'name':'c'} ]
    }
  },
  methods: {
    setHide: function(item) {
      this.$set(item, 'hide', true);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  <div v-for="item in items" :key="item" v-if="!item.hide">
    <span @click="setHide(item)">{{item.name}}</span>
  </div>
</div>

当我在 vue js 中单击 div 时如何隐藏特定的 div

how to hide specific div when i click div in vue js

javascript

laravel

vue.js

vue-component

vuejs2