Как интегрировать HTML-код в класс VUE - PullRequest
Новая
       2

Как интегрировать HTML-код в класс VUE

0 голосов
/ 21 мая 2019

Я делаю функцию поиска, которая фильтрует некоторые карты, которые у меня есть, поэтому, если я начну печатать слона, он покажет только карту слона.

Так что мне удалось заставить его работать, но я хотел сделать его немного лучше, и я хочу немного стилизовать каждую карточку и даже использовать шрифт, потрясающие значки, но я не могу понять, как это сделать.

Так что в моем основном 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,

Есть ли способ достичь этого?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Это яркий пример того, как вы можете использовать компоненты Vue. Я сделал здесь пример с кодом: 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>`
})
  1. Первая строка определяет имя компонента.
  2. Тогда у нас есть значение реквизита, которое является свойствами / атрибутами вашего компонент.
  3. Далее мы используем вычисляемое свойство объекта vue для автоматической генерации класса font-awesome из подпорок sign.
  4. Наконец, мы определяем наш шаблон, как он должен отображаться. Я сделал это очень просто, показывая значок, заголовок жирным шрифтом и информацию курсивом.

Затем мы определяем наше приложение 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'
        }
      ]
    }
  },  
})
  1. Перехватывает приложение vue с помощью элемента с id = "demo"
  2. У него есть объект данных, который содержит заголовок для нашего приложения vue
  3. В нем есть список всех карт, которые мы определили.
  4. У каждой карты есть некоторые свойства, которые соответствуют опорам нашего компонента.

Теперь нам нужно только отрендерить приложение. 

<div id="demo">
  <h1>{{ title  }}</h1>
  <card v-for="card in cardList" :header="card.header" :info="card.info" :sign="card.sign" />
</div>
  1. Мы перебираем наш cardList с помощью v-for
  2. Для каждой карты мы используем компонент карты

Чтобы сделать фильтр, лучше всего

  1. Иметь вычисляемое свойство, называемое somethin, как FilterCardList
  2. Создать свойство данных с именем filter
  3. Свяжите свойство фильтра со входом с v-моделью
  4. Пусть функция FilterCardList фильтрует версию массива cardList, если есть какое-либо значение фильтра, в противном случае возвращает его без фильтрации.
  5. Сделать цикл v-for с помощью FilterCardList
0 голосов
/ 21 мая 2019

Я бы использовал директиву 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 на alligator.io

...