vue中格式化json数据输出到html中

在Vue中，你可以使用计算属性来格式化JSON数据并将其输出到HTML中。以下是一个简单的例子：

<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      jsonData: {
        name: "Vue.js",
        type: "JavaScript Framework",
        year: 2014
      }
    };
  },
  computed: {
    formattedJson() {
      // 使用JSON.stringify将对象转换为字符串，并格式化输出
      return JSON.stringify(this.jsonData, null, 2);
    }
  }
};
</script>

在这个例子中，jsonData 是组件的数据属性，包含了待格式化的JSON对象。formattedJson 是一个计算属性，使用 JSON.stringify 方法将 jsonData 转换为字符串，并通过指定 null 和缩进级别 2 来进行格式化。在模板中，使用 {{ formattedJson }} 将格式化后的JSON数据直接输出到HTML中，使用 <pre> 标签来保持格式化。