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

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

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

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

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

Спасибо.

Используйте синтаксис «усы» для «интерполяции» (т.е. отображения на месте) значений переменных. Например, <div>{{info}}</div> отобразит содержимое info внутри блока div.

B. Fleming 21.05.2019 21:15
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
103
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Большое спасибо! здорово иметь такое место.

Laxus 22.05.2019 02:26

Это яркий пример того, как вы можете использовать компоненты 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>`
})
  1. Первая строка определяет имя компонента.
  2. Затем у нас есть значение реквизита, которое является свойствами/атрибутами вашего компонент.
  3. Затем мы используем вычисляемое свойство объекта vue для автоматического создания класса font-awesome из реквизитов знака.
  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. Мы прокручиваем наш список карт с помощью v-for
  2. Для каждой карты мы используем компонент карты

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

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

Другие вопросы по теме