如何在v-for中切换特定项目的vue js中的类

Question

如何通过项目列表中的 btn 特定 div 进行切换，我从 json 获得哪个并使用 v-for 显示？

我知道我不能只将 v-if 设置为 div 并添加到 vue 数据，但在这种情况下，它会填充打开和关闭所有 div

 <div class="about" v-if="list">
                  <div class="dat"  v-for="data in item.items_situation" :key="data.a">
                        {{data.doc_valid_through}}
                        {{data.document_type}}
                        {{data.item_nr_full}}
                        {{data.item_text}}
                </div>
                <div class="situation-btn">
                    <input class="situatuin-btn" type="submit" value="Подбробнее" v-on:click="hide">
                </div>
            </div>

当我点击按钮时，我想切换一个 div 而不是全部

Answer 1

有很多方法可以实现，我给你一个。

1. 通过为每个项目添加 visible 属性，将您的 JSON 数组映射到 data。
2. 在循环内添加按钮（因此它为每个项目附加）并通过单击它来创建visible = false。
3. 显示过滤结果（仅限visible === true）

new Vue({
  el: "#app",
  
  data: {
    items: [
      { text: "Learn JavaScript", id: 1 },
      { text: "Learn Vue", id: 2 },
      { text: "Play around in JSFiddle", id: 3 },
      { text: "Build something awesome", id: 4 }
    ].map(item => ({...item, visible: true})),
    
    hiddenItems: []
  },
  
  
  computed: {
    visibleItems() {
      return this.items.filter(item => item.visible)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="dat" v-for="item in visibleItems" :key="item.id">
    {{item.text}}
    <button v-on:click.prevent="item.visible = false">X</button>
  </div>
</div>

Answer 2

您可以使用 v-bind:class 动态地将类添加到元素中。代码应该是这样的：

<div class="about" v-if="list">
    <div v-for="data in items" v-bind:class="{hide: data.isHidden}" :key="data.key">
        Something
    </div>
    <div class="situation-btn">
        <input class="situatuin-btn" type="submit" value="Подбробнее" v-on:click="hide">
    </div>
</div>

然后在hide

hide(){
    this.items[i].isHidden = true
}

data.isHidden 属性决定列表中的元素是否应具有hide 类。 另见Class and Style Bindings。

-------已编辑-------

我已经发布了一个例子here