vue json.stringify

// 示例代码：在 Vue 中使用 JSON.stringify

<template>
  <div>
    <button @click="stringifyObject">点击将对象转换为 JSON 字符串</button>
    <p>{{ jsonString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'Vue',
        version: '3.0',
        features: ['Component', 'Reactivity', 'Directives']
      },
      jsonString: ''
    };
  },
  methods: {
    stringifyObject() {
      // 使用 JSON.stringify 将 JavaScript 对象转换为 JSON 字符串
      this.jsonString = JSON.stringify(this.obj, null, 2);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 包含一个按钮，点击时会触发 stringifyObject 方法。
   • 显示转换后的 JSON 字符串。

2. 脚本部分 (<script>)：

   • 定义了一个 Vue 组件。
   • data 函数返回一个包含 obj 和 jsonString 的对象。obj 是一个示例的 JavaScript 对象，jsonString 用于存储转换后的 JSON 字符串。
   • methods 中定义了 stringifyObject 方法，该方法使用 JSON.stringify 将 obj 转换为 JSON 字符串，并将其赋值给 jsonString。第三个参数 2 表示缩进空格数，使输出格式更易读。

3. 样式部分 (<style scoped>)：

   • 可以根据需要添加样式，这里没有特别的样式需求，所以留空。

通过这个示例，你可以看到如何在 Vue 组件中使用 JSON.stringify 来将 JavaScript 对象转换为 JSON 字符串并显示在页面上。