如何在vue中添加变量并将其用作代码编辑器？

Question

我正在 vue 中构建一个代码编辑器，它有 4 个主要部分：html 代码、css 代码、js 代码和结果 (预习）。我想从数据（html 代码、css 代码和 js 代码）添加变量，以便我可以在代码编辑器中使用添加的数据作为结果。

我的模板是这样的：

<template>
  <div class="grid">
    <div id="html" class="grid-cell">
      <textarea v-model="htmlCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="css" class="grid-cell">
      <textarea v-model="cssCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="js" class="grid-cell">
      <textarea v-model="jsCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="preview" class="grid-cell">
      <div v-html="htmlandcss"></div>
      <div class="title">This is a cell</div>
    </div>
  </div>
</template>

我的脚本如下所示：

<script>
export default {
  name: "CodeEditor",
  methods: {},
  data() {
    return {
      htmlCode: '<h1>hi</h1>',
      cssCode: '',
      jsCode: '',
      htmlandcss: this.htmlCode + this.cssCode
    }
  },[![this is ][1]][1]
  computed: {
  }
};
</script>

我在代码编辑器中的结果应该类似于 h1。

这是我目前的结果：

https://i.stack.imgur.com/J25qW.png

Answer 1

将您的结果变量设为计算值属性，问题就解决了：

<script>
export default {
  name: "CodeEditor",
  methods: {},
  data() {
    return {
      htmlCode: '<h1>hi</h1>',
      cssCode: '',
      jsCode: '',
    }
  },
  computed: {
    htmlandcss() {
      return this.htmlCode.concat(this.cssCode);
  }
};
</script>

如何在vue中添加变量并将其用作代码编辑器？

How to add variables in vue and use them as a code editor?

javascript

variables

vue.js

vuejs3