首先需要在项目里安装marked格式编辑包 在项目根目录下运行npm install marked 安装依赖包
至此，package.json里面 dependencies 已经添加 "marked": "^0.5.1",
然后在需要显示的组件里编写显示区域：
1 <div class="mark">
2 <textarea rows="10" cols="100" class="editor" v-model="markValue">
3
4 </textarea>
5 <div class="show" v-html="currValue"></div>
6 </div>
textarea是输入栏显示区域，需要对数据进行双向绑定，完成数据输入的实时更新 v-model="markValue"
1 import Marked from "marked"
2 export default{
3 name:"Vfooter",
4 data(){
5 return{
6 markValue:""
7 }
8 },
我们在对数据进行操作前先声明输入框变量为空，引入marked编辑器包
1 computed:{
2 currValue(){
3 return Marked(this.markValue)
4 }
5 }
在显示框调用currValue这个方法后，该方法用marked编辑包对输入的数据进行格式编辑，并返回HTML标记字符，显示框此时用v-html属性直接解析返回的数据
原文：https://www.cnblogs.com/wen-kang/p/9977511.html