Madeas
@Madeas
UI / UX Designer, Frontend Developer

Можно ли как-нибудь разграничить v-html и простой текст в шаблоне?

Добрый день!

Есть такая структура json файла:
"add": [
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "<div class='alert info'>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>"
                ],


В нем имеются и простой текст и html теги.

Во Vue.component, сейчас я указываю в шаблоне так:
<ul class="dots">
<template v-for="(value) in p.add">
<li v-html="value"></li>
</template>
</ul>

Можно ли как-нибудь разделить шаблон на простой текст и текст с тегами?

ЗАЧЕМ?
Для элементов списка с классом dots прописаны определенные стили, но для alert хотелось бы их убрать. Я это сделаю, опять же, через стили, но пока не знаю, как разделить html тег и текст.
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
"add": [
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
],


<ul class="dots">
<template v-for="(value) in p.add">
<li :class="value.class">{{value.text}}</li>
</template>
</ul>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы