Markdown转HTML【Vue】

使用 markdown-it

一、先安装

npm install markdown-it --save

二、用法

<template>
    <div>
      <h1>Vue中Markdown转HTML</h1>
      <textarea cols="30" rows="10" v-model="content"></textarea>
      <p>{{ content }}</p>
      <p>{{ markdown }}</p>
      <p v-html="markdown"></p>
    </div>
</template>
<script>
import MarkdownIt from 'markdown-it'

export default {
  name: 'MdHtml',
  data () {
    return {
      content: ''
    }
  },
  computed: {
    markdown () {
      const md = new MarkdownIt()
      const result = md.render(this.content)
      return result
    }
  }
}
</script>
<style scoped>
textarea{
  width: 350px;
}
</style>

效果如下：