Vue.js快速实现多个按钮的点击隐藏，再次点击显示

Question

我想要实现一组div，点击其中一个div,该div隐藏，再次点击则显示，vue.js新手用这种笨办法实现了，求问各位大神有其他好的快速的方法吗，就像复选框是可以利用v-model和v-blind实现，这种div的我试了一下好像不可以，拜托拜托~

Answer 1

点击其中一个div,该div隐藏,你再到哪里去点击显示啊？

<template>
  <div class="topic-select">
    <div class="cell" v-for="(topic,index) in topic_list" @click="updateCount(index)" :class="{'highlight':topic.seen}">
      <svg    class="topic_icon" :style="{'background-color':topic.bgc}"></svg>
      <p class="topic_card">{{topic.name}}</p>
      <p class="topic_count">{{topic.count}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        topic_list: [
          { name: 'agriculture', bgc: '#ea5545', count: 456, seen: false },
          { name: 'biodiversity', bgc: '#27aeef', count: 7989, seen: false },
          { name: 'climate', bgc: '#87bc45', count: 123, seen: false },
          { name: 'disaster', bgc: '#f46a9b', count: 56, seen: false },
          { name: 'energy', bgc: '#7c4dff', count: 9089, seen: false },
          { name: 'ecosystems', bgc: '#bdcf32', count: 322, seen: false },
          { name: 'geology', bgc: '#b33dc6', count: 1456, seen: false },
          { name: 'health', bgc: '#ef9b20', count: 6789, seen: false },
          { name: 'water', bgc: '#27aeef', count: 4356, seen: false },
          { name: 'weather', bgc: '#edbf33', count: 7890, seen: false }
        ]
      }
    },
    methods: {
      updateCount: function (index) {
        this.topic_list[index].seen = !this.topic_list[index].seen
      }
    }
  }

</script>
<style>
  .highlight{
   opacity: 0;
  }
</style>

Answer 2

v-if = false 的时候 你的div就被销毁

Answer 3

写一个

.hiddren{display:none}
然后绑定
 :class="{ hiddren : state//控制是是否隐藏true/false}"

如果是列表的话
在data定义选择的cell索引

 data:{
    selected: 1000
}
:class="{ hiddren : (selected == index)//控制是是否隐藏true/false}"

methods里面

click(index){
  this.selected = index;//就可以隐藏了
}

我也有一个问题，这一行你都隐藏了，还怎么点击显示出来

Answer 4

隐藏了，就点不到了。。除非你假隐藏，改透明度；要不就另外用一个按钮操作其他按钮