时间戳

首页 > 解决方案 > vuejs 自动过滤掉标记为“Bar”的数组

vue.js - vuejs 自动过滤掉标记为“Bar”的数组

问题描述

我是新的 vuejs，但学到了很多东西。我有一组可以完美呈现到列表的项目。我不想显示任何标记为 Bar 的东西吗？我试过 !Bar 但它不起作用。这样做的正确方法是什么？

var app = new Vue({
  el: "#demo",
  data: {
    items: [{
      childMsg: 'Foo'
    }, {
      childMsg: 'Bar'
    }]
  }
});
<script src="https://unpkg.com/vue"></script>

<div id="demo">
  <ul v-for="item in items">
    <li>{{item.childMsg}}</li>
  </ul>
</div>

标签： vue.js

解决方案

像往常一样，有几种方法。最直接的一种方法是直接在v-for元素模板中排除该项目，如下所示：

<li v-if="item.childMsg !== 'Bar'">{{item.childMsg}}</li>

另一种方法是创建一个计算属性：与模式不匹配的项目数组。然后你可以重新定位v-for到那个属性。这是如何完成的：

var app = new Vue({
  el: "#demo",
  data: {
    exclude: '',
    items: [{
      childMsg: 'Foo'
    }, {
      childMsg: 'Bar'
    }]
  },
  computed: {
    filteredItems() {
      return this.items.filter(x => x.childMsg !== this.exclude);
    }
  }
});
<script src="https://unpkg.com/vue"></script>

<div id="demo">
  <label>Exclude word... <input type="text" v-model="exclude" /></label>
  <ul v-for="item in filteredItems">
    <li>{{item.childMsg}}</li>
  </ul>
</div>

推荐阅读