vue 代码编辑器

<template>
  <div id="app">
    <h2>Vue 代码编辑器示例</h2>
    <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;
      }
    }
  }
};
</script>

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

解释说明：

• 模板部分 (<template>):

  • 包含一个文本区域 (<textarea>) 用于用户输入代码。
  • 一个按钮 (<button>) 用于触发代码的执行。
  • 一个 <pre> 标签用于显示代码的输出结果。

• 脚本部分 (<script>):

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

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

  • 为文本区域设置了宽度和高度，使其更易于编辑代码。

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