Vue.js 如何为Vue组件创建筛选器

一般来说，我对VueJS和web开发不熟悉。我正在进行一个将Vue组件显示为卡片的项目。我希望这个网络应用成为一个每次只出现一张卡的水疗中心

是否可以将搜索字段之类的内容放在我可以键入的位置（比如在卡片中找到的姓名或文本）并显示该卡片。如果我不清楚，请提前道歉。这也是创建此卡的多个实例的最佳方法吗？谢谢

Vue.component('blog-card', {
   template: '#blog-card',
   data: function data() {
      return {
      name: 'LeBron James',
      category: 'Slasher',
      image: 'http://ak-static.cms.nba.com/wp- 
      content/uploads/headshots/nba/latest/260x190/2544.png',
      author: '99',
      desc: '23 Badges'
  };
 }
});

Vue.component('blog-card2', {
  template: '#blog-card',
   data: function data() {
      return {
      name: 'Steph Curry',
      category: 'Shot Creator',
      image: 'http://ak-static.cms.nba.com/wp-content/uploads/headshots/nba/latest/260x190/201939.png',
      author: '96',
      desc: '15 Badges'
    };
  }
});

new Vue({
  el: '#container'
});

---

您可以使用道具（名称、类别、说明等）为普通卡创建vue组件。 然后将模板放置在主vue应用程序中并填充其道具。这样，您就不会与组件冗余

Vue.component('blog', {
props:  [   name: String,
            category: String,
            image: String,
            age: Number
        ],
template: '<h3>{{ name }}</h3>
            <span>{{ category }}</span>
            <img v-bind:src="image">
            <span>{{ age }}</span>'})

Vue.component（'blog'{
道具：[名称：String，
类别：字符串，
图像：字符串，
年龄:数目
],
模板：'{name}}
{{category}}
{{age}}}}）

---

我认为您可以使用道具，我认为这是最简单的方法，因为看起来您只是在更改数据，但是如果您需要呈现不同的组件，可以使用组件指令来实现，如下所示：

<component v-bind:is="currentComponent"></component>

因此，通过这种方式，您可以创建一个名为search或类似的小表单，一旦提交了它，您就可以更新currentComponent道具，它将呈现需要呈现的组件。这实际上在文档中：

---

使用计算属性，然后返回类似以下内容的内容：

返回此.cards.filter（（项）=>{/*如果包含关键字，请检查项，如此.keyword*/}）