Question

我如何从btn特定的div项列表中切换，我从json中获得了一个并使用v-for显示？

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

 <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

有很多方法可以实现这一目标，我将为您提供一种方法。

通过为每个项目添加data属性，在visible中映射您的JSON数组。
在循环内添加按钮（因此每个项目都附有按钮），然后单击以创建visible = false。
显示过滤的结果（仅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

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

2 个答案: