marked实现

安装marked

npm install marked --save

1、创建输入和转换面板

  <div class="app">
    <div class="mark">
      <div class="edit">
        <textarea  class="marked_data" name="marked_data" cols="100" rows="10" v-model="markedData"></textarea>
        <div class="show" v-html="listenMarked"></div>
      </div>
    </div>
  </div>


.mark {
  width: 1210px;
  height: 600px;
  margin: 0 auto;
}

.marked_data,
.show {
  float: left;
  width: 500px;
  height: 600px;
  border: 1px solid #666;
}

2、v-model监听输入框

<textarea  class="marked_data" name="marked_data" cols="100" rows="10" v-model="markedData"></textarea>

3、计算属性转换为marked

import Marked from "marked"

export default {
  name: "App",
  data() {
    return {
      markedData:"",
    };
  },
computed: {
      listenMarked(){
          return Marked(this.markedData)
      }
  },

4、转换面板调用计算属性方法

<div class="show" v-html="listenMarked"></div>