Question

我正在做一个搜索功能，可以过滤掉我拥有的某些卡，因此，如果我开始输入大象，那么它只会显示大象卡。

所以我设法使它工作，但是我想使其更好一点，并且我希望对每张卡片进行一些样式设置，甚至使用字体很棒的图标，但是我不知道该怎么做。

所以在我的主要html文件中，我使用v-for和v-bind从js文件中获取卡片。

卡代码：

    class Custcard {constructor(header, info, img, sign) {
    this.header = header;
    this.info = info;
    this.img = img;
    this.sign = sign;
  }}




new Custcard(
    'title',
    'info',
    'imgurl',
    'sign,

可以，但是因为每张卡都有些不同，所以我正在尝试执行以下操作：

new Custcard(
'<h1>title</h1>',
'<span class="font awesome icon"></span>info',
'imgurl',
'sign,

有没有办法做到这一点？

谢谢。

Answer 1

我会使用v-html指令。

最终看起来像这样：

<div v-for="(card, idx) in cards" v-bind:key="idx" class="card">
    <div class="card-header" v-html="card.header"></div>
    <div class="card-info" v-html="card.info"></div>
    {{ card.img }}
    {{ card.sign }}
</div>

或有影响的东西。

您可以找到有关v-html on alligator.io

的更多信息

Answer 2

这是如何使用Vue组件的主要示例。我在这里制作了一个Codepen示例：https://codepen.io/bergur/pen/byYKwd，其解释如下。

首先定义组件。您正在描述卡片，因此我们将其称为“卡片”组件，它应该具有一些适当的层次，例如标题，信息和标志。

Vue.component('card', {
  props: ['header', 'info', 'sign'],
  computed: {
    icon() {
      return 'fas fa-'+this.sign
    }
  },
  template: `
    <div>
      <i :class="icon"></i> <b>{{ header }}</b> - <em>{{ info }}</em>
    </div>`
})

第一行定义了组件的名称。
然后我们获得props值，它们是您的属性/属性组件。
接下来，我们将对vue对象的计算属性进行最终化处理，以根据符号道具自动生成超棒的字体。
最后，我们定义模板，以及模板的呈现方式。我已经非常简单了，用粗体显示图标，用斜体显示信息。

然后我们定义vue应用。

new Vue({
  el: '#demo',  
  data() {
    return  {
      title: 'All the cards',
      cardList: [
        {
          header: 'Angry guy',
          info: 'The angry guy is always mad',
          sign: 'angry'
        },
        {
          header: 'Smiley guy',
          info: 'The smiley guy is always really happy',
          sign: 'smile'
        }
      ]
    }
  },  
})

它使用具有id =“ demo”的元素来挂钩vue应用
它具有一个数据对象，其中包含我们vue应用程序的标题
它具有我们定义的所有卡的列表。
每张卡的某些属性都与我们组件的道具匹配。

现在我们只需要渲染应用程序。

<div id="demo">
  <h1>{{ title  }}</h1>
  <card v-for="card in cardList" :header="card.header" :info="card.info" :sign="card.sign" />
</div>

我们使用v-for遍历cardList
对于每张卡，我们都使用卡组件

要制作过滤器，最好的方法是

具有一个称为somethin的计算属性，例如filteredCardList
创建一个称为过滤器的数据属性
使用带有v-model的输入绑定filter属性
如果有一些过滤器值，则让filterListingCardList函数过滤cardList数组的版本，否则返回未经过滤的值。
通过filterCardList进行v-for循环

如何在Vue类中集成HTML代码

2 个答案: