Question

我是新的vuejs，但学到了很多东西。我有一系列项目可以很好地呈现到列表中。我想不显示任何标有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>

Answer 1

像往常一样，有几种方法。最简单的方法是直接在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>

vuejs自动过滤掉标有“Bar”的数组

1 个答案: