Использовать значение JSON как HTML-тег с vue

У меня есть файл JSON, выводящий следующие стили:

{
"h1" : {
    "font-family" : "Lato",
    "font-size" : "24px",
    "line-height" : "28px",
    "font-weight" : 600,
    "colorId" : 3,
    "margin-bottom" : "10px",
    "margin-top" : "20px"
},
"h2" : {
    "font-family" : "Lato",
    "font-size" : "20px",
    "line-height" : "24px",
    "font-weight" : 600,
    "colorId" : 3,
    "margin-bottom" : "10px",
    "margin-top" : "20px"
}

}

Я хочу использовать первый ключ «h1, h2, ...» в качестве HTML-тега для его отображения. Возможно ли это с Vue?

Должно получиться примерно так:

<div v-for = "(props, tag) in headers">
    <{{ tag }}>x</ {{ tag }}>
</div>

html json parsing vue.js

12.11.2018 10:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

571

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

<div v-for = "(props, tag) in headers" v-html = "`<${tag}>x</${tag}>`"></div>

Это мило! Спасибо. Как насчет добавления стилей? <div v-for = "(props, tag) в заголовках" v-html = "<${tag} v-bind:style='${props}'>This is a ${ tag }-header</${tag}>"> </div>

— 12.11.2018 11:17

Таким образом, к нему невозможно привязать какие-либо свойства. Вы передаете статическую строку html в v-html. Но вы можете добавить функцию, которая строит html. <div v-for = "(props, tag) в заголовках" v-html = "buildHtml (props, tag)"> </div> buildHtml (props, tag) {return <${tag} + Object.keys (props) .reduce ((total, key) => {return total + `$ {key}: $ {props [key]}"); + > + x + <${tag}>}

— 12.11.2018 11:28

12.11.2018 11:06