首先需要在專案裡安裝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屬性直接解析返回的資料