Я делаю функцию поиска, которая фильтрует некоторые карты, которые у меня есть, поэтому, если я начну печатать слона, она покажет только карту слона.
Итак, мне удалось заставить его работать, но я хотел сделать его немного лучше, и я хочу немного стилизовать каждую карту и даже использовать потрясающие значки шрифтов, но я не могу понять, как это сделать.
Итак, в моем основном 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,
Есть ли способ добиться этого?
Спасибо.
Я бы использовал директиву 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 на аллигатор.ио
Большое спасибо! здорово иметь такое место.
Это яркий пример того, как вы можете использовать компоненты 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>`
})
Затем мы определяем наше приложение 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'
}
]
}
},
})
Теперь нам нужно только визуализировать приложение.
<div id = "demo">
<h1>{{ title }}</h1>
<card v-for = "card in cardList" :header = "card.header" :info = "card.info" :sign = "card.sign" />
</div>
Чтобы сделать фильтр, лучше всего
Используйте синтаксис «усы» для «интерполяции» (т.е. отображения на месте) значений переменных. Например,
<div>{{info}}</div>
отобразит содержимоеinfo
внутри блокаdiv
.