vue3前端以json样式输入组件实现

IT_xiaocai27

已于 2023-09-20 13:23:28 修改

阅读量2k

点赞数

文章标签： vue.js 前端 javascript

于 2023-09-20 11:28:31 首次发布

本文链接：https://blog.csdn.net/weixin_38328865/article/details/133071624

版权

在 Vue 3 中，你可以创建一个组件，让用户输入 JSON，并将这个 JSON 渲染成某种样式或结构。以下是一个简单示例，它涵盖了如何在 Vue 3 中创建一个接受 JSON 输入并呈现其内容的组件：

Setup Vue Project:
如果你还没有设置 Vue 3 项目，可以使用 Vue CLI 进行设置：
```
npm install -g @vue/cli
vue create my-vue3-project
```
然后选择 Vue 3 配置。
创建 JSON 输入组件:

JsonInputComponent.vue

<template>
  <div>
    <textarea v-model="jsonInput" @input="parseJson" placeholder="Enter JSON here"></textarea>
    <div v-if="parsedData">
      <pre>{{ parsedData }}</pre>
    </div>
    <p v-if="error" style="color: red;">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonInput: '',
      parsedData: null,
      error: null
    };
  },
  methods: {
    parseJson() {
      try {
        this.parsedData = JSON.parse(this.jsonInput);
        this.error = null;
      } catch (e) {
        this.parsedData = null;
        this.error = 'Invalid JSON!';
      }
    }
  }
};
</script>

<style scoped>
/* Add your CSS styling here */
textarea {
  width: 100%;
  height: 200px;
}
</style>

使用组件:

在你的主文件或任何父组件中，你可以如下使用 JsonInputComponent:

<template>
  <div>
    <JsonInputComponent />
  </div>
</template>

<script>
import JsonInputComponent from './path-to/JsonInputComponent.vue';

export default {
  components: {
    JsonInputComponent
  }
};
</script>

这个示例仅仅展示了如何解析和显示输入的 JSON。你可以根据需要对该 JSON 进行任何形式的呈现或操作。