vue中json显示成html

在Vue中，我们可以使用v-html指令来将JSON数据显示为HTML。v-html指令允许我们将一个字符串作为原始HTML输出到页面上。

首先，在Vue的模板中，我们需要使用v-html指令来绑定一个变量，并将JSON数据传给这个变量。例如：

<div v-html="jsonData"></div>

其中，jsonData是一个包含JSON数据的变量。

然后，在Vue的实例中，我们需要将JSON数据转换为HTML字符串，并将其赋值给jsonData变量。一种常见的方式是使用JSON.stringify()和JSON.parse()方法。例如：

new Vue({
  data: {
    jsonData: ''
  },
  created() {
    const json = {
      title: '标题',
      content: '<p>这是一段带有HTML样式的文本</p>'
    };
    this.jsonData = JSON.stringify(json);
    this.jsonData = JSON.parse(this.jsonData);
  }
});

在上面的示例中，我们在Vue实例的created钩子函数中，创建了一个名为json的对象，它包含一个带有HTML样式的文本。然后，我们使用JSON.stringify()方法将这个对象转换为JSON字符串，并将其赋值给jsonData变量。最后，我们使用JSON.parse()方法将这个JSON字符串转换回原始的JavaScript对象。

这样，当Vue实例创建时，jsonData变量将被更新为包含正确格式的HTML字符串。然后，v-html指令将这个HTML字符串作为原始HTML输出到页面上，实现了将JSON显示为HTML的效果。