vue markdown

<template>
  <div>
    <textarea v-model="markdownContent" placeholder="请输入Markdown内容"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';

export default {
  data() {
    return {
      markdownContent: '# 欢迎使用Vue Markdown编辑器\n\n这是一个简单的Vue和Markdown结合的示例。'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownContent);
    }
  }
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 150px;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 使用了一个 textarea 元素来输入 Markdown 内容，并通过 v-model 绑定到 data 中的 markdownContent。
  • 使用了一个 div 元素来显示编译后的 HTML 内容，通过 v-html 指令将 computed 属性 compiledMarkdown 的值渲染为 HTML。

• 脚本部分 (<script>):

  • 引入了 marked 库来解析 Markdown 文本。
  • 定义了 data 函数返回一个对象，其中包含 markdownContent，用于存储用户输入的 Markdown 内容。
  • 定义了 computed 属性 compiledMarkdown，它会根据 markdownContent 的变化自动调用 marked 函数进行解析，并返回解析后的 HTML 字符串。

• 样式部分 (<style scoped>):

  • 为 textarea 设置了宽度和高度，使其更易于编辑。