若依vue如何展示一个HTML页面(或者展示Markdown文档)
一. 前言
⚠ 本文是展示Markdown的方法,不能直接前端编辑Markdown文档.
二. 准备部分
用Typora编辑器打开需要导出html页面,我这里使用Typora来导出
1. 先将md文件导出成html
2. 将导出好的文件放在若依vue的pubilc下(文件可以是中文)

三. 代码部分
1.使用v-html来展示HTML文件:
<template><div class="app-container home"><p v-html="htmlContent"></p></div>
</template>
2. 使用XMLHttpRequest读取HTML文件
<script>
export default {name: "Index",data() {return {htmlContent: ''};},mounted() {// 在组件挂载时将HTML内容加载到htmlContent中this.loadHtmlFile();},methods: {loadHtmlFile() {this.htmlContent = "";let xhr = new XMLHttpRequest()// 线上链接地址// xhr.open("GET", val.url, false);// public文件夹下的绝对路径xhr.open("GET", "操作手册.html", false); xhr.overrideMimeType("text/html;charset=utf-8")xhr.send(null)this.htmlContent = xhr.responseText;}},
};
</script>
四. 完成后的样子

这里要注意一下,图片是不可以使用本地文件的,必须使用图床,不然图片都会不显示:
例如:
相关文章:
若依vue如何展示一个HTML页面(或者展示Markdown文档)
一. 前言 ⚠ 本文是展示Markdown的方法,不能直接前端编辑Markdown文档. 二. 准备部分 用Typora编辑器打开需要导出html页面,我这里使用Typora来导出 1. 先将md文件导出成html 2. 将导出好的文件放在若依vue的pubilc下(文件可以是中文) 三. 代码部分 1.使用v-html来展示HT…...
优化for循环(js的问题)
性能优化 var array [];for (let index 0; index < array.length; index) {// do something }// 优化后 for (let index 0, len array.length; index < len; index) {// do something } 算法优化 // 求和:1 2 3 4 ... 100 var sum 0; for (let i …...
如何更好的去理解源码
前言 这篇文章我准备来聊一聊如何去阅读开源项目的源码。 在聊如何去阅读源码之前,先来简单说一下为什么要去阅读源码,大致可分为以下几点原因: 最直接的原因,就是面试需要,面试喜欢问源码,读完源码才可以…...
c# opencv 获取多边形中心点
在C#中使用OpenCV获取多边形的中心点,可以按照以下步骤进行: 首先,你需要找到图像中的轮廓。这可以通过FindContours方法实现: using OpenCvSharp;Mat src new Mat("your_image_path", ImreadModes.Grayscale); Mat …...
Redis数据一致解决方案
文章目录 前言技术积累查询缓存业务流程更新缓存业务流程 更新缓存问题解决方案写在最后 前言 当前的应用服务很多都有着高并发的业务场景,对于高并发的解决方案一般会用到缓存来降低数据库压力,并且还能够提高系统性能减少请求耗时,比如我们…...
安捷伦DSOX2024A示波器
参考波形 示波器的非易失参考波形存储器可以存储两个波形。比较这些参考波形与实时波形,并对已存储数据进行后分析和测量。您也可将波形数据存储到移动USB 存储器设备。这些数据还能调用到示波器的两个参考存储器的其中一个,进行全面的波形测量和分析。为…...
Leetcode算法系列| 4. 寻找两个正序数组的中位数
目录 1.题目2.题解C# 解法一:合并List根据长度找中位数C# 解法二:归并排序后根据长度找中位数C# 解法三:方法二的优化,不真实添加到listC# 解法四:第k小数C# 解法五:从中位数的概念定义入手 1.题目 给定两个…...
Java整合APNS推送消息-IOS-APP(基于.p12推送证书)
推送整体流程 1.在开发者中心申请对应的证书(我用的是.p12文件) 2.苹果手机用户注册到APNS,APNS将注册的token返回给APP(服务端接收使用)。 3.后台服务连接APNS,获取连接对象 4.后台服务构建消息载体 5.后台…...
C语言strcpy函数用法
C语言strcpy函数用法 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,让我们一起深入了解C语言中的strcpy函数,这是一个在字符串处理中非…...
汽车服务品牌网站建设的作用是什么
汽车服务涵盖多个层面,在保修维护这一块更是精准到了车内车外,无论是品牌商还是市场中各维修部,都能给到车辆很好的维修养护服务。如今车辆的人均拥有量已经非常高,也因此市场中围绕汽车相关的从业者也比较多。 首先就是拓客引流…...
【iOS】UICollectionView
文章目录 前言一、实现简单九宫格布局二、UICollectionView中的常用方法和属性1.UICollectionViewFlowLayout相关属性2.UICollectionView相关属性 三、协议和代理方法:四、九宫格式的布局进行升级五、实现瀑布流布局实现思路实现原理代码调用顺序实现步骤实现效果 总…...
Linux poll 和 select 机制
poll select 介绍 使用非阻塞 I/O 的应用程序常常使用 poll, select, 和 epoll 系统调用. poll, select 和 epoll 本质上有相同的功能: 每个允许一个进程来决定它是否可读或者写一个 或多个文件而不阻塞. 这些调用也可阻塞进程直到任何一个给定集合的文件描述符可用来 读或写.…...
【JVM基础】 JVM 如何加载一个类以及类加载机制
文章目录 1、什么时候一个类会被加载?1、包含 main 方法的主类2、非 包含 main 方法的主类,什么时候去加载? 3、类加载器如何加载一个类?1、验证阶段:2、准备阶段:3、解析阶段:4、初始化&#x…...
Android Studio使用Genymotion
1. Genymotion介绍 GenyMotion速度之快令人发指,模拟效果堪比真机调试,支持绝大部分的模拟器功能,甚至包括语音,Google Now,支持eclipse, android studio。非常适合用来开发和演示效果。 2. Genymotion下载 Genymotio…...
Mysql sql_mode参数配置
今天在使用数据库查询时使用了Group语句,遇到问题: SELECT t1.UnderlyingInstrumentID, t2.* FROM t_OptionInstrument t1 LEFT JOIN t_Instrument t2 ON t2.InstrumentID t1.UnderlyingInstrumentID GROUP BY t1.UnderlyingInstrumentID > 1055 - …...
SpringIOC之AbstractMessageSource
博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…...
详解Vue3中的基础路由和动态路由
本文主要介绍Vue3中的基础路由和动态路由。 目录 一、基础路由二、动态路由 Vue3中的路由使用的是Vue Router库,它是一个官方提供的用于实现应用程序导航的工具。Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、…...
Mysql四种事务隔离级别(简易理解)
读未提交:简单理解就是读到没有提交事务的执行结果;读已提交:简单理解就是只能读到已经提交的事务执行结果;可重复读:简单理解就是确保并发读取数据库时,读到的数据一致,这是mysql默认隔离级别&…...
react中使用redux最简单最方便的方式,配合rematch简化操作,5分钟学会
react中使用状态管理的方式也很多,比如redux和mobx等,今天这一片就讲一下redux的入门到熟练使用,主要是要理解它redux的组成有哪些,到怎么创建,和组建中怎么使用三个问题。这里先放上官网文档,不理解的地方…...
vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统
vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像2、安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像 官方提供使用通道 访问官网 链接: https://www.kylinos.cn/ 下…...
GLM-5.1 全面支持与 Gemini CLI 集成:HagiCode 的多模型进化之路
GLM-5.1 全面支持与 Gemini CLI 集成:HagiCode 的多模型进化之路 本文介绍了 HagiCode 平台近期的重要更新——智谱 AI GLM-5.1 模型的全面支持,以及 Gemini CLI 作为第十个 Agent CLI 的成功集成。这两项更新进一步强化了平台的多模型能力和多 CLI 生态…...
Clawdbot整合Qwen3:32B效果体验:长文档理解与精准问答演示
Clawdbot整合Qwen3:32B效果体验:长文档理解与精准问答演示 1. 从痛点出发:为什么你需要这个工具 如果你经常需要处理技术文档、合同、论文或者产品手册,一定遇到过这样的困扰:面对一份几十页甚至上百页的PDF文件,想要…...
YOLOv8与SenseVoice-Small的多模态安防监控系统设计
YOLOv8与SenseVoice-Small的多模态安防监控系统设计 1. 系统设计背景与价值 在现代安防监控领域,单纯依靠视频分析已经无法满足复杂场景下的安全需求。传统的监控系统往往需要人工实时监控,不仅效率低下,而且容易遗漏关键信息。特别是在夜间…...
Janus-Pro-7B效果展示:手写体/表格/多语言混合OCR识别准确率实测
Janus-Pro-7B效果展示:手写体/表格/多语言混合OCR识别准确率实测 1. 引言 你有没有遇到过这样的场景?翻出一张老照片,背面是长辈用钢笔写下的寄语,字迹有些潦草,想把它转成电子版保存,却一个字也认不出来…...
探秘书匠策AI:毕业论文创作的“全能助手”大揭秘
在学术探索的征途中,毕业论文如同一座巍峨的山峰,让无数学生既心怀憧憬又倍感压力。从选题迷茫到文献海捞,从结构搭建到内容雕琢,每一步都充满了挑战。但别怕,今天我们就来揭秘一位学术界的“全能助手”——书匠策AI&a…...
Magma智能剪辑系统:视频自动生成实战
Magma智能剪辑系统:视频自动生成实战 1. 引言 想象一下这样的场景:你有一个精彩的视频创意,写好了详细的脚本,但面对一堆零散的素材片段却无从下手。传统的视频剪辑需要逐帧挑选、拼接、添加转场,一个几分钟的视频可…...
Qwen3.5-9B-AWQ-4bit开源可部署教程:私有云/K8s集群中部署多实例视觉理解服务
Qwen3.5-9B-AWQ-4bit开源可部署教程:私有云/K8s集群中部署多实例视觉理解服务 1. 模型概述 Qwen3.5-9B-AWQ-4bit是一个支持图像理解的多模态模型,能够结合上传图片与文字提示词,输出中文分析结果。这个量化版本特别适合在资源受限的环境中部…...
OpenCode应用案例:搭建企业内部代码审查助手,提升开发效率
OpenCode应用案例:搭建企业内部代码审查助手,提升开发效率 1. 项目背景与痛点分析 在软件开发团队中,代码审查是保证代码质量的关键环节。然而传统人工审查方式面临诸多挑战: 时间成本高:资深工程师需要花费大量时间…...
Heritrix3源码深度解析:从CrawlURI到ProcessorChain的执行流程
Heritrix3源码深度解析:从CrawlURI到ProcessorChain的执行流程 【免费下载链接】heritrix3 Heritrix is the Internet Archives open-source, extensible, web-scale, archival-quality web crawler project. 项目地址: https://gitcode.com/gh_mirrors/he/herit…...
Qwen3-TTS快速部署教程:一键启动Web服务,3分钟开始声音克隆
Qwen3-TTS快速部署教程:一键启动Web服务,3分钟开始声音克隆 1. 为什么选择Qwen3-TTS进行语音克隆 想象一下这样的场景:你需要为海外客户录制多语言产品介绍,但雇佣专业配音演员成本高昂;或者想为自己的视频内容添加个…...
