首先需要在项目里安装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
时间: 2024-10-11 12:17:24