如何将数据从 HTML 编辑器转换为页面上的 HTML？答案

【问题标题】：How to convert data from HTML editor to HTML on the page?如何将数据从 HTML 编辑器转换为页面上的 HTML？
【发布时间】：2021-10-17 12:05:17
【问题描述】：

我有一个从主页和管理面板构建的项目。在我的管理面板上，我有 Vue2Editor - HTML 编辑器。所以，当我写东西时，它会进入数据库，然后该数据显示在主页上，但是有一个问题。

数据示例如下：

  {
    "id": "04c47128-de82-459c-acb5-c8d99c61bbe6",
    "content_tip": "<h3>Some random text</h3>",
    "created_at": "2021-10-17T11:53:03.000Z",
    "updated_at": "2021-10-17T11:53:03.000Z"
  },

正如您所见，content_tip 字段值看起来像简单的 HTML，但在页面上我看到的是简单的文本，那么，如何将 <h3>Some random text</h3> 转换为页面上的真实 HTML。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

你需要使用v-html指令：

new Vue({
  el: '#demo',
  data() {
    return {
       item: {
        "id": "04c47128-de82-459c-acb5-c8d99c61bbe6",
        "content_tip": "<h3>Some random text</h3>",
        "created_at": "2021-10-17T11:53:03.000Z",
        "updated_at": "2021-10-17T11:53:03.000Z"
      },
    }
  }
})

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-html="item.content_tip"></div>
</div>

【讨论】：