vue-codemirror现实html

vue-codemirror是一个基于Vue.js和CodeMirror的代码编辑器组件，可以用来在网页中实时展示和编辑HTML、CSS、JavaScript等代码。要在vue-codemirror中实现实时展示HTML，可以在Vue的模板中使用`<codemirror>`标签，并且设置其mode为"htmlmixed"。同时，可以使用v-model指令来绑定一个data中的变量，从而实现实时展示和编辑HTML代码的功能。

以下是一个示例代码：

<template>
  <div>
    <codemirror v-model="htmlCode" :options="editorOptions"></codemirror>
    <div v-html="htmlCode"></div>
  </div>
</template>

<script>
import Codemirror from 'vue-codemirror'

export default {
  components: {
    Codemirror
  },
  data() {
    return {
      htmlCode: '<h1>Hello World!</h1>',
      editorOptions: {
        mode: 'htmlmixed',
        theme: 'monokai'
      }
    }
  }
}
</script>

以上代码中，首先引入了vue-codemirror组件，并在模板中使用了`<codemirror>`标签来展示和编辑HTML代码。同时，利用v-html指令将htmlCode变量中的内容实时渲染到页面上。在data选项中，定义了一个htmlCode变量来存储HTML代码，并设置了editorOptions来配置CodeMirror的属性，包括mode和theme等。