vue代码编辑器

<template>
  <div id="app">
    <textarea v-model="code"></textarea>
    <button @click="runCode">运行代码</button>
    <pre>{{ output }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: 'console.log("Hello, Vue!");',
      output: ''
    };
  },
  methods: {
    runCode() {
      try {
        // 使用 eval 运行用户输入的代码
        this.output = eval(this.code);
      } catch (error) {
        this.output = `Error: ${error.message}`;
      }
    }
  }
};
</script>

<style>
textarea {
  width: 100%;
  height: 150px;
}
</style>

解释说明：

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

   • 包含一个 textarea 元素，用于用户输入代码。
   • 一个按钮，点击后会触发 runCode 方法来运行用户输入的代码。
   • 一个 pre 标签用于显示代码的输出结果。

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

   • data 函数返回一个对象，包含两个属性：
     • code: 默认值为 "console.log('Hello, Vue!');"，表示用户可以在此基础上编辑代码。
     • output: 用于存储并显示代码执行的结果或错误信息。
   • methods 中定义了 runCode 方法，该方法使用 eval 来执行用户输入的 JavaScript 代码，并将结果或错误信息存储在 output 中。

3. 样式部分 (<style>):

   • 简单设置了 textarea 的宽度和高度，以便用户有足够空间输入代码。

这个示例展示了如何创建一个简单的 Vue.js 代码编辑器，允许用户输入 JavaScript 代码并运行它。