当前位置: 首页 > news >正文

若依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 } 算法优化 // 求和&#xff1a;1 2 3 4 ... 100 var sum 0; for (let i …...

如何更好的去理解源码

前言 这篇文章我准备来聊一聊如何去阅读开源项目的源码。 在聊如何去阅读源码之前&#xff0c;先来简单说一下为什么要去阅读源码&#xff0c;大致可分为以下几点原因&#xff1a; 最直接的原因&#xff0c;就是面试需要&#xff0c;面试喜欢问源码&#xff0c;读完源码才可以…...

c# opencv 获取多边形中心点

在C#中使用OpenCV获取多边形的中心点&#xff0c;可以按照以下步骤进行&#xff1a; 首先&#xff0c;你需要找到图像中的轮廓。这可以通过FindContours方法实现&#xff1a; using OpenCvSharp;Mat src new Mat("your_image_path", ImreadModes.Grayscale); Mat …...

Redis数据一致解决方案

文章目录 前言技术积累查询缓存业务流程更新缓存业务流程 更新缓存问题解决方案写在最后 前言 当前的应用服务很多都有着高并发的业务场景&#xff0c;对于高并发的解决方案一般会用到缓存来降低数据库压力&#xff0c;并且还能够提高系统性能减少请求耗时&#xff0c;比如我们…...

安捷伦DSOX2024A示波器

参考波形 示波器的非易失参考波形存储器可以存储两个波形。比较这些参考波形与实时波形&#xff0c;并对已存储数据进行后分析和测量。您也可将波形数据存储到移动USB 存储器设备。这些数据还能调用到示波器的两个参考存储器的其中一个&#xff0c;进行全面的波形测量和分析。为…...

Leetcode算法系列| 4. 寻找两个正序数组的中位数

目录 1.题目2.题解C# 解法一&#xff1a;合并List根据长度找中位数C# 解法二&#xff1a;归并排序后根据长度找中位数C# 解法三&#xff1a;方法二的优化&#xff0c;不真实添加到listC# 解法四&#xff1a;第k小数C# 解法五&#xff1a;从中位数的概念定义入手 1.题目 给定两个…...

Java整合APNS推送消息-IOS-APP(基于.p12推送证书)

推送整体流程 1.在开发者中心申请对应的证书&#xff08;我用的是.p12文件&#xff09; 2.苹果手机用户注册到APNS&#xff0c;APNS将注册的token返回给APP&#xff08;服务端接收使用&#xff09;。 3.后台服务连接APNS&#xff0c;获取连接对象 4.后台服务构建消息载体 5.后台…...

C语言strcpy函数用法

C语言strcpy函数用法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一起深入了解C语言中的strcpy函数&#xff0c;这是一个在字符串处理中非…...

汽车服务品牌网站建设的作用是什么

汽车服务涵盖多个层面&#xff0c;在保修维护这一块更是精准到了车内车外&#xff0c;无论是品牌商还是市场中各维修部&#xff0c;都能给到车辆很好的维修养护服务。如今车辆的人均拥有量已经非常高&#xff0c;也因此市场中围绕汽车相关的从业者也比较多。 首先就是拓客引流…...

【iOS】UICollectionView

文章目录 前言一、实现简单九宫格布局二、UICollectionView中的常用方法和属性1.UICollectionViewFlowLayout相关属性2.UICollectionView相关属性 三、协议和代理方法&#xff1a;四、九宫格式的布局进行升级五、实现瀑布流布局实现思路实现原理代码调用顺序实现步骤实现效果 总…...

Linux poll 和 select 机制

poll select 介绍 使用非阻塞 I/O 的应用程序常常使用 poll, select, 和 epoll 系统调用. poll, select 和 epoll 本质上有相同的功能: 每个允许一个进程来决定它是否可读或者写一个 或多个文件而不阻塞. 这些调用也可阻塞进程直到任何一个给定集合的文件描述符可用来 读或写.…...

【JVM基础】 JVM 如何加载一个类以及类加载机制

文章目录 1、什么时候一个类会被加载&#xff1f;1、包含 main 方法的主类2、非 包含 main 方法的主类&#xff0c;什么时候去加载&#xff1f; 3、类加载器如何加载一个类&#xff1f;1、验证阶段&#xff1a;2、准备阶段&#xff1a;3、解析阶段&#xff1a;4、初始化&#x…...

Android Studio使用Genymotion

1. Genymotion介绍 GenyMotion速度之快令人发指&#xff0c;模拟效果堪比真机调试&#xff0c;支持绝大部分的模拟器功能&#xff0c;甚至包括语音&#xff0c;Google Now&#xff0c;支持eclipse, android studio。非常适合用来开发和演示效果。 2. Genymotion下载 Genymotio…...

Mysql sql_mode参数配置

今天在使用数据库查询时使用了Group语句&#xff0c;遇到问题&#xff1a; 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

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…...

详解Vue3中的基础路由和动态路由

本文主要介绍Vue3中的基础路由和动态路由。 目录 一、基础路由二、动态路由 Vue3中的路由使用的是Vue Router库&#xff0c;它是一个官方提供的用于实现应用程序导航的工具。Vue Router在Vue.js的核心库上提供了路由的功能&#xff0c;使得我们可以在单页应用中实现页面的切换、…...

Mysql四种事务隔离级别(简易理解)

读未提交&#xff1a;简单理解就是读到没有提交事务的执行结果&#xff1b;读已提交&#xff1a;简单理解就是只能读到已经提交的事务执行结果&#xff1b;可重复读&#xff1a;简单理解就是确保并发读取数据库时&#xff0c;读到的数据一致&#xff0c;这是mysql默认隔离级别&…...

react中使用redux最简单最方便的方式,配合rematch简化操作,5分钟学会

react中使用状态管理的方式也很多&#xff0c;比如redux和mobx等&#xff0c;今天这一片就讲一下redux的入门到熟练使用&#xff0c;主要是要理解它redux的组成有哪些&#xff0c;到怎么创建&#xff0c;和组建中怎么使用三个问题。这里先放上官网文档&#xff0c;不理解的地方…...

vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统

vmware安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像2、安装中标麒麟高级服务器操作系统软件 V7.0操作系统 1、下载中标麒麟高级服务器操作系统软件 V7.0镜像 官方提供使用通道 访问官网 链接: https://www.kylinos.cn/ 下…...

沉浸式翻译扩展常见问题解决方案

沉浸式翻译扩展常见问题解决方案 【免费下载链接】immersive-translate 沉浸式双语网页翻译扩展 , 支持输入框翻译&#xff0c; 鼠标悬停翻译&#xff0c; PDF, Epub, 字幕文件, TXT 文件翻译 - Immersive Dual Web Page Translation Extension 项目地址: https://gitcode.c…...

多平台资源下载解决方案:res-downloader实现数字内容自由获取

多平台资源下载解决方案&#xff1a;res-downloader实现数字内容自由获取 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 在数…...

像素皇城·灵蛇贺岁实战案例:高校AI课程中像素春联生成器教学项目设计

像素皇城灵蛇贺岁实战案例&#xff1a;高校AI课程中像素春联生成器教学项目设计 1. 项目背景与教学价值 在高校AI课程教学中&#xff0c;如何将传统文化与现代技术相结合&#xff0c;设计出既有教育意义又富有趣味性的实践项目&#xff0c;一直是教学设计的难点。"像素皇…...

从ULN2803芯片内部拆解,聊聊三极管“黄金搭档”达林顿管到底强在哪?

ULN2803芯片拆解&#xff1a;达林顿管如何成为三极管的“黄金搭档”&#xff1f; 当我们需要用单片机的微弱IO口信号&#xff08;通常只有几毫安&#xff09;驱动继电器、电机这类“大胃王”负载时&#xff0c;就像试图用一根吸管给游泳池注水——理论可行&#xff0c;实际效率…...

实战-EdgeBoard赛事卡:从零部署飞桨模型到智能车竞赛

1. EdgeBoard赛事卡开箱与环境准备 第一次拿到EdgeBoard赛事专用卡时&#xff0c;这块巴掌大的小盒子让我有点怀疑——这么小的板子真能跑动智能车竞赛需要的视觉模型吗&#xff1f;拆开包装后发现&#xff0c;除了板卡本体&#xff0c;配件只有一根Type-C线&#xff0c;确实符…...

3种革命性技术突破:解放城通网盘下载速度的终极方案

3种革命性技术突破&#xff1a;解放城通网盘下载速度的终极方案 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾经面对城通网盘那令人绝望的下载速度而束手无策&#xff1f;当急需获取重要文件…...

WebAgent :基于 MCP 协议打造的智能应用“超级路由器”

本文由云软件体验技术团队李锦浩原创。 在 NextSDK 介绍文章里&#xff0c;我们聊了怎么用 opentiny/next-sdk 给前端页面快速接入智能化能力——几行代码嵌进去&#xff0c;用户扫个二维码&#xff0c;手机上就能弹出一个 Remoter 对话窗口&#xff0c;直接用自然语言远程操控…...

springboot+vue基于web的汽车后市场维修保养管理系统的设计与实现

目录系统功能模块分析维修保养业务模块财务与统计模块客户端交互功能技术实现要点项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作系统功能模块分析 用户管理模块 实现用户注册、登录、权限管理&#xff08;管理员、员工、客户…...

BilibiliDown:从技术视角重新定义B站视频下载体验

BilibiliDown&#xff1a;从技术视角重新定义B站视频下载体验 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bi…...

AMD笔记本性能优化与温度控制完全指南:使用G-Helper实现CPU降压调优

AMD笔记本性能优化与温度控制完全指南&#xff1a;使用G-Helper实现CPU降压调优 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other mod…...