如何在 vue class 中集成 html 代码

Question

我正在开发一个搜索功能来过滤我拥有的一些卡片，所以如果我开始输入 elephant，它只会显示大象卡片。

所以我设法让它工作，但我想让它变得更好一点，我想为每张卡片设计一点样式，甚至使用字体很棒的图标，但我不知道该怎么做。

所以在我的主 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 解释如下。

您首先要定义您的组件。您正在描述一张卡片，所以让我们调用组件 'card'，它应该有一些属性，例如 header、信息和符号。

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>`
})

第一行定义组件的名称。
然后我们得到道具值，即您的 properties/attributes 组件。
接下来我们利用 vue object 的计算属性来自动从标志道具生成 font-awesome class。
最后我们定义了我们的模板，它应该如何呈现。我把它变得非常简单，显示图标，粗体标题和斜体信息。

然后我们定义我们的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"
它有一个数据 object 保存我们的 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
对于每张卡片，我们都使用卡片组件

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

有一个计算的属性叫做 filteredCardList
创建一个名为过滤器属性的数据
将过滤器属性与 v-model
如果有一些过滤值，让 filteredCardList 函数过滤 cardList 数组的版本，否则 return 它未过滤。
使 v-for 循环遍历 filteredCardList

如何在 vue class 中集成 html 代码

How to integrate html code in a vue class

vue.js

v-for