根据它们的值显示和隐藏 v-for 循环内的某些 div？答案

【问题标题】：Show and hide certain divs inside of v-for loop based on their value?根据它们的值显示和隐藏 v-for 循环内的某些 div？
【发布时间】：2020-05-02 08:36:39
【问题描述】：

我有一个在 v-for 循环中显示的对象列表。它们都有一个特定的键值对，并且基于该值，我希望用户能够在循环结构之外切换按钮以显示或隐藏这些元素。基本上我希望首先显示所有项目，然后一旦切换按钮，只显示具有真实值的项目，然后返回所有项目，等等。

有点像

 const items = [
    { 
      exampleKey: false
    },
    { 
      exampleKey: true
    },
    { 
      exampleKey: false
    }
 ]

 <button @click="updateList">click to update list</div>
 <div v-for="items in itemList">item example</div>

 methods: {
    updateList: function(){
        // make the magic happen
    }
 }

当然，这只是一些伪代码，但它说明了我想要了解的内容。我正在寻找某种类型的方法或计算属性，可以让用户切换项目的可见性。

【问题讨论】：

标签： javascript jquery html vue.js

【解决方案1】：

所以你 shouldn't 将 v-for 和 v-if 组合在同一个元素上。您可以做的是在您的v-for 中包含一个过滤器：

<div v-for="item in items.filter(i => i.exampleKey)">{{item.foo}}</div>

或者（我的偏好）您可以像往常一样迭代项目以创建容器 div，并仅在满足所需条件的情况下添加子内容：

<div v-for="item in items">
  <div v-if="item.exampleKey">{{item.foo}}</div>
</div>

如果您想添加一个控件来隐藏/显示 exampleKey 为 false 的项目，您可以将循环更改为：

<div v-for="item in items">
  <div v-if="item.exampleKey || showItemsWithFalseExampleKey">{{item.foo}}</div>
</div>

您可以创建一个由按钮切换的数据属性“showItemsWithFalseExampleKey”：

<button @click="showItemsWithFalseExampleKey = !showItemsWithFalseExampleKey">Toggle hidden items</button>

当然，v-if 的渲染成本比使用 v-show 高很多，所以根据您的情况选择哪个更好：https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

【讨论】：

我的男人。非常感谢所有伟大的建议。像魅力一样工作。
很高兴为您提供帮助。编码愉快！

【解决方案2】：

当单击按钮并让计算属性返回基于该属性的项目时，我会将数据属性设置为真/假。

类似这样的：

<button @click="showElements = !showElements">click me</button>
<div v-for="item in filteredItems">{{ item }}</div>

data() {
  return {
    items: [
      { 
        exampleKey: false
      },
      { 
        exampleKey: true
      },
      { 
        exampleKey: false
      }
    ],
    showElements: true
  };
},
computed: {
  filteredItems() {
    return showElements ? this.items : this.items.filter(item => item.exampleKey);
  }
}

【讨论】：