vue3 代码编辑器

<template>
  <div id="app">
    <textarea v-model="code" placeholder="在这里编写你的代码"></textarea>
    <button @click="runCode">运行代码</button>
    <pre>{{ output }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      output: ''
    };
  },
  methods: {
    runCode() {
      try {
        // 使用 new Function 来执行用户输入的代码，并捕获输出
        this.output = eval(this.code);
      } catch (error) {
        this.output = 'Error: ' + error.message;
      }
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
}

button {
  margin-bottom: 10px;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 包含一个 textarea 用于输入代码。
  • 一个按钮用于触发代码执行。
  • 一个 pre 标签用于显示代码执行的结果或错误信息。

• 脚本部分 (<script>):

  • data 函数返回一个对象，包含两个属性：code（用户输入的代码）和 output（代码执行结果或错误信息）。
  • methods 中定义了 runCode 方法，该方法使用 eval 执行用户输入的代码，并将结果或错误信息存储在 output 中。

• 样式部分 (<style scoped>):

  • 定义了一些基本的样式，使界面更加美观。