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/

Answer 2

没有完成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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: