时间戳

首页 > 解决方案 > 使用 JSON 值作为带有 vue 的 HTML 标记

html - 使用 JSON 值作为带有 vue 的 HTML 标记

问题描述

我有一个输出以下样式的 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>

标签： htmljsonparsingvue.js

解决方案

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

推荐阅读