JSONhtml字串到新頁面

各位下午好，

我有一個來自 API 的 JSON 檔案，其中文章以 HTML 格式的長字串存盤，如何在新頁面上打開它們？如果我將它插入到一個帶有 HTML 擴展名的檔案中，那么我就會得到一個格式很好的網頁。資料作為“專案”屬性作為串列出現，我嘗試讓它們像這樣鏈接，其中文章位于 details_en 下

      `https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`

 <div id="article">{{item.details_en}}</div>

實際的 JSON 字串看起來像這樣，但要長得多：

<p style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p></span></p><p style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p><p style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p></span></p><p style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p>

uj5u.com熱心網友回復：

嘗試使用 v-html 指令：

new Vue({
  el: '#demo',
  data() {
    return {
      items: [{details_en:'<p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p>'}, {details_en:'<p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p>'}]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(item, idx) in items" :key="idx" id="article" v-html="item.details_en"></div>
</div>

標籤：html json Vue.js

上一篇：我如何知道Listview中的資料在android中是否已更改？

下一篇：回應式畫布vuejs