1

сейчас у меня также все выводится. Нужно стилизовать только некоторые слова и вывести текст получается через дерективу v-html

<section class="advantage">
  <img class="advantage__image" src="/advantage.png" alt="на изображении автоматическая коробка передач">
  <div class="advantage__information-card">
    <h2 class="advantage__title">Клиенты выбирают нас,
      потому что:</h2>
    <div class="advantage__container-information-list">
    <ul class="advantage__information-list" v-for="item in items" :key="item.id">
      <li class="advantage__information-list-item">
      <img class="advantage__logos" :src="item.src" alt="изображение логотипов на тематику автомастерских">
      <p class="advantage__paragraph">{{item.title}}</p>

</li>

    </ul>
    </div>
  </div>

</section>
 </main>
</template>

<script>
export default {
  name: 'IndexPage',
  data: () => ({
    items: [
        { id: 1, src: "/advantage-logo1.svg", title: "Диагностика DSG S-Tronic Powershift - бесплатно" },
        { id: 2, src:  "/advantage-logo4.svg", title: "У нас работают только опытные механики и слесаря" },
        { id: 3, src: "/advantage-logo2.svg", title:  "Мы производим быстрый и качественный ремонт АКПП"},
        { id: 4, src: "/advantage-logo5.svg",  title: "Адаптация коробки передач DSG S-Tronic Powershift - бесплатно" },
        { id: 5, src: "/advantage-logo3.svg",  title: "В нашем сервисе адекватные цены на услуги" },
        { id: 6, src: "/advantage-logo6.svg",  title: "Мы работаем на рынке уже более 10 лет" },
       ],
  })
}
</script>

Нужно Vue js сделать текст в карточке у некоторых слов выделить текст другим стилем, т.е жирным сделать. Вывожу карточку через v-for.Все получается как надо. Чтобы выделить текст жирным нашел дерективу v-html и пытаюсь стилизовть в data через span. Стилизация получается но теперь незнаю как вывести каждый параграф отдельно, они все умножаются на 6 на число моего обьекта items. Подскажите как вывести правильно текст для карточки, чтобы он не размножался, а шел друг за другом как надо?сейчас в коде вывод из обьекта, все работает как надо! Подскажите как стилизовать некоторые слова в title и вывести этот html через дерективу v-html?

1

1 ответ 1

1

Подскажите как вывести правильно текст для карточки, чтобы он не размножался, а шел друг за другом как надо?

умножается на 6 потому что вы делаете так: (в цикле создаете 6 UL)

 <ul class="advantage__information-list" v-for="item in items" :key="item.id">

а нужно повесить цикл на Li

 <li v-for="item in items" :key="item.id">
2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.