将JSON值用作带有vue的HTML标签

时间:2018-11-12 09:53:36

标签: html json parsing vue.js

我有一个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>

1 个答案:

答案 0 :(得分:0)

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