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> 标签保持原格式。