悠悠楠杉
网站页面
使用vue-markdown实现markdown文件预览
06/05
组件
：
```javascript
import VueMarkdown from 'vue-markdown'
import 'vue-markdown/dist/VueMarkdown.css' // 引入样式文件（可选）
export default {
components: {
VueMarkdown
}
}
```
javascript
data() {
return {
markdownContent: {
title: "我的文章标题",
keywords: ["关键词1", "关键词2", "关键词3"],
description: "这是一篇关于Vue-markdown使用的文章，介绍如何使用vue-markdown在Vue应用中预览Markdown文件。",
content: `# 我的文章标题\n\n## 关键词\n- 关键词1\n- 关键词2\n- 关键词3\n\n这是一段简短的描述性文字，介绍文章的主要内容。\n\n接下来是正文部分，正文大约1000字左右。这里你可以写更详细的内容...\n`
}
}
}
展示 Markdown 内容
组件，并绑定到你的 Markdown 内容：
```html
```
注意：这里我们使用了 vue-markdown 组件，所以直接传入 raw HTML 是可行的。不过，对于其他需要渲染 HTML 的场景，应谨慎使用 v-html 并考虑使用其他方法（如使用富文本编辑器等）。另外，在实际项目中应避免直接从用户输入中获取内容并使用 v-html，以防止 XSS 攻击。
