鍍金池/ 問答/HTML/ vue 中 插入html 標簽

vue 中 插入html 標簽

我從后臺獲取一個數(shù)組；例如：數(shù)組長度不確定，出現(xiàn)的type值也不確定；例如下面這樣，請注意數(shù)組長度和出現(xiàn)的type值是不確定的；并且要根據數(shù)組的順序顯示；請大神指導；回答問題的；麻煩自己在vue-cli里面自己代碼實現(xiàn)一下，確定了再回答。

{

"sections": [
    {
        "section": -1,
        "content": "創(chuàng)世紀 第二章",
        "type": "ChapterHeader"
    },
    {
        "section": -1,
        "content": "安息日",
        "type": "SubHeader"
    },
    {
        "section": 1,
        "content": "這樣，天地和天地間的一切點綴都完成了。",
        "type": "Section"
    },
    {
        "section": -1,
        "content": "人與樂園",
        "type": "SubHeader"
    },
    {
        "section": 4,
        "content": "這是創(chuàng)造天地的來歷：在上主天主創(chuàng)造天地時，",
        "type": "Section"
    },
    {
        "section": -1,
        "content": "造女人立婚姻",
        "type": "SubHeader"
    },
    {
        "section": 18,
        "content": "上主天主說：“人單獨不好，我要給他造個與他相稱的助手?！?,
        "type": "Section"
    }
    ………………
]

}

渲染成

<h3>創(chuàng)世紀 第二章</h3>
<h4>安息日</h4>
<p value="1">1 這樣，天地和天地間的一切點綴都完成了。</p>
<h4>人與樂園</h4>
<p value="4">4 這是創(chuàng)造天地的來歷：在上主天主創(chuàng)造天地時，</p>
<h4>造女人立婚姻</h4>
<p value="18">18 上主天主說：“人單獨不好，我要給他造個與他相稱的助手?！?lt;/p>
……………………

回答
編輯回答
夕顏

我想你需要的可能是這個

<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>

希望對你有幫助。

2017年11月27日 22:20