vue 中 插入html 标签

Question

我从后台获取一个数组；例如：数组长度不确定，出现的type值也不确定；例如下面这样，请注意数组长度和出现的type值是不确定的；并且要根据数组的顺序显示；请大神指导；回答问题的；麻烦自己在vue-cli里面自己代码实现一下，确定了再回答。

{

"sections": [
    {
        "section": -1,
        "content": "创世纪 第二章",
        "type": "ChapterHeader"
    },
    {
        "section": -1,
        "content": "安息日",
        "type": "SubHeader"
    },
    {
        "section": 1,
        "content": "这样，天地和天地间的一切点缀都完成了。",
        "type": "Section"
    },
    {
        "section": -1,
        "content": "人与乐园",
        "type": "SubHeader"
    },
    {
        "section": 4,
        "content": "这是创造天地的来历：在上主天主创造天地时，",
        "type": "Section"
    },
    {
        "section": -1,
        "content": "造女人立婚姻",
        "type": "SubHeader"
    },
    {
        "section": 18,
        "content": "上主天主说：“人单独不好，我要给他造个与他相称的助手。”",
        "type": "Section"
    }
    ………………
]

}

渲染成

<h3>创世纪 第二章</h3>
<h4>安息日</h4>
<p value="1">1 这样，天地和天地间的一切点缀都完成了。</p>
<h4>人与乐园</h4>
<p value="4">4 这是创造天地的来历：在上主天主创造天地时，</p>
<h4>造女人立婚姻</h4>
<p value="18">18 上主天主说：“人单独不好，我要给他造个与他相称的助手。”</p>
……………………

Answer 1

我想你需要的可能是这个

<template v-for="item of array">
  <h1 v-if="item.type ==='str'">{{ item.content }}</h1>
  <h2 v-if="item.type ==='array'">{{ item.content }}</h2>
</template>

几番评论后的补充

就是一个 v-for 就能解决的事情。
这段代码你直接贴去用吧，也不指望你看文档自己思考了。只希望你以后虚心一点，不然学习道路上要吃亏的。

<template v-for="item of sections">
  <h3 v-if="item.type === 'ChapterHeader'">{{ item.content }}</h3>
  <h4 v-if="item.type === 'SubHeader'">{{ item.content }}</h4>
  <p v-if="item.type === 'Section'" :value="item.section">{{ `${item.section} ${item.content}` }}</p>
</template>

希望对你有帮助。

Answer 2

你是要按照json生成html标签吧，不知你现在完成了咩有？？
我也有相同的需求，希望能交流一下