Vue-Markdown：高效渲染Markdown的Vue组件

这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。




<template>
  <div v-html="compiledMarkdown"></div>
</template>
 
<script>
import marked from 'marked';
 
export default {
  props: ['source'],
  computed: {
    compiledMarkdown() {
      return marked(this.source, { sanitize: true });
    }
  }
}
</script>

这个简单的Vue组件接收一个source属性，它包含Markdown源码。然后使用marked库将Markdown转换为HTML，并通过v-html指令插入到模板中。这里的sanitize: true选项用于清理输出的HTML以防止XSS攻击。这个例子展示了如何将Markdown渲染为安全的HTML，并直接插入到Vue组件的模板中。

Vue-Markdown：高效渲染Markdown的Vue组件

评论已关闭

推荐阅读