在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue 中 插入html 標(biāo)簽

vue 中 插入html 標(biāo)簽

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

{

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

}

渲染成

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

回答
編輯回答
夕顏

我想你需要的可能是這個(gè)

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

幾番評(píng)論后的補(bǔ)充

就是一個(gè) v-for 就能解決的事情。
這段代碼你直接貼去用吧，也不指望你看文檔自己思考了。只希望你以后虛心一點(diǎn)，不然學(xué)習(xí)道路上要吃虧的。

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

希望對(duì)你有幫助。

2017年11月27日 22:20