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

Posted 2023-02-23

【中文标题】当我在vue js中单击div时如何隐藏特定的div

【英文标题】：how to hide specific div when i click div in vue js

【发布时间】：2017-08-24 10:05:30

【问题描述】：

<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 **当我这样做时，它们都被隐藏了**

【参考方案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/

【讨论】：

我更新了它，所以你有一个“隐藏”数组，你可以开始推送你想要隐藏的元素的索引

是的，我做到了，但是这个包 npmjs.com/package/vue2-google-maps 它是与 vuejs2 一起使用的包装器

【参考方案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>

【讨论】：

我从 api 获取这个数据并且没有显示文件我也在尝试：for (let i of this.items) i.visible=true;

@AslanMuhammad-Rza 在原始问题中没有投票时有点苛刻。

【参考方案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>