vue md 转html
时间: 2024-01-04 21:04:14 浏览: 27
你可以使用第三方的库或插件将Markdown格式的文本转换为HTML。在Vue项目中,常用的库是`markdown-it`和`marked`。以下是使用`markdown-it`的示例代码:
首先,安装`markdown-it`库:
```bash
npm install markdown-it --save
```
然后,在Vue组件中引入并使用`markdown-it`:
```vue
<template>
<div>
<div v-html="convertedHtml"></div>
</div>
</template>
<script>
import MarkdownIt from 'markdown-it';
export default {
data() {
return {
markdownText: '# Hello, Markdown!',
convertedHtml: '',
};
},
mounted() {
this.convertMarkdownToHtml();
},
methods: {
convertMarkdownToHtml() {
const md = new MarkdownIt();
this.convertedHtml = md.render(this.markdownText);
},
},
};
</script>
```
上述代码中,我们在`mounted`生命周期钩子中调用了`convertMarkdownToHtml`方法,该方法使用`markdown-it`将Markdown文本转换为HTML,并将结果存储在`convertedHtml`变量中。然后,我们使用`v-html`指令将转换后的HTML渲染到页面上。
希望对你有所帮助!如果有任何疑问,请随时提问。