关于javascript:vue项目使用markdown展示文本

vue 我的项目应用 markdown 展现文本

下载 mavon-editor

npm i mavon-editor --save

如何引入

main.js

import Vue from 'vue'
import App from './App'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
});

index.vue

<template>
<mavon-editor :toolbars="toolbars" v-model="value" :subfield="prop.subfield" :defaultOpen="prop.defaultOpen" :toolbarsFlag="prop.toolbarsFlag" :editable="prop.editable" :scrollStyle="prop.scrollStyle" :boxShadow="prop.boxShadow" ref=md />
</template>
<script>
    ...
    data() {
        return {value: "# test markdown"};
    },
    computed: {prop() {
            let data = {
                subfield: false,// 单双栏模式
                defaultOpen: 'preview',//edit：默认展现编辑区域，preview：默认展现预览区域 
                editable: false,
                toolbarsFlag: false,
                scrollStyle: false,
                boxShadow: false// 边框
            }
            return data
        }
    }
</script>

<p style=”color: #FFB6C1″> 一招毙命，打完出工，✿✿ヽ (°▽°) ノ✿</p>