这是我自己做的一个功能，点击左边对应的标题，右边显示对应的代码。代码显示这里使用了vue-codemirror插件。

第一种用法：

1.安装：NPM安装vue-代码镜像-保存

2.main.js中引入

从“vue-codemirror”导入vuecodemirr导入“code mirror/lib/code mirror . CSS”vue . use(vuecodemirr)3。用于组件

从“vue-codemirror”导入{ code mirror }“import”code mirror/theme/ambience . CSS”；//这里介绍主题风格。根据设定主题的主题，一定要介绍！必选(' code mirror/mode/JavaScript/JavaScript ')；//js的模式介绍到这里，按照设定的模式，一定要介绍！在组件中声明：

组件： {codemirror}，html代码编写：

code mirror ref=' my code ' : value=' cur code ' : options=' CmOptions ' class=' code '/code mirror data。我在这里简单地写下了CMOS选项的配置。对于具体的配置项目，可以查看官方文档。

curCode: ' '，cmOptions:{ value: ' '，mode:'text/javascript '，theme: ' ambiance '，readOnly:true，}

第二种用法：

步骤1和2与第一次使用中的步骤相同

3.用于组件

从“codemirror/lib/codemirror”导入code mirror“import”code mirror/theme/ambience . CSS”；必选(' code mirror/mode/JavaScript/JavaScript ')；

将其写入组件，并将其写入挂载：

mounted(){ this . editor=codemirror . fromtextrea(this。$refs.mycode，{ mode:'text/javascript '，theme: ' ambiance '，readOnly:true，}，

html代码的编写：

text area ref=' my code ' class=' code SQL public _ text ' v-model=' code '/text area

在切换改变值的方法时，需要使用setValue方法，第一种方式可以直接改变v-model绑定的值

change code(value){ this . code=value；this . editor . SetVaLue(this . code)；}摘要

以上是边肖介绍的codemirror的两种用法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！