zoukankan      html  css  js  c++  java
  • 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 {
       1210px;
      height: 600px;
      margin: 0 auto;
    }
    
    .marked_data,
    .show {
      float: left;
       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>
  • 相关阅读:
    java代理的深入浅出(一)-Proxy
    事件分发模型的设计与实现
    LibProject使用theme无效。
    HeaderGridView
    android开源代码
    IOS学习4
    IOS学习3
    IOS学习2
    Mac上添加adb_usb.ini
    OC学习-1
  • 原文地址:https://www.cnblogs.com/aizhinong/p/12608664.html
Copyright © 2011-2022 走看看