Vue-Markdown：高效渲染Markdown的Vue组件
<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组件的模板中。
评论已关闭