vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

前言:

        整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。

效果:

vue2/vue3: 默认修改

public/index.html   index.html

<!DOCTYPE html>
<html lang="en"><head><link rel="icon" type="image/svg+xml" href="图标地址" /><title>显示文字</title>
... //图标放在public里面

js:动态修改

动态修改文字

let title = "新的标题"; // 设置新的标题
document.title = title; // 动态修改网站标题

动态修改icon图标

function changeFavicon(link) {let $favicon = document.querySelector('link[rel="icon"]');if ($favicon !== null) {$favicon.href = link;} else {$favicon = document.createElement("link");$favicon.rel = "icon";$favicon.href = link;document.head.appendChild($favicon);}
}let iconUrl = "新的图标地址"; // 设置新的图标地址
changeFavicon(iconUrl); // 动态修改网站图标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/235881.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超维空间M1无人机使用说明书——41、ROS无人机使用yolo进行物体识别

引言&#xff1a;用于M1无人机使用的18.04系统&#xff0c;采用的opencv3.4.5版本&#xff0c;因此M1无人机只提供了基于yolov3和yolov4版本的darknet_ros功能包进行物体识别&#xff0c;识别效果足够满足日常的物体识别使用&#xff0c;如果需要更高版本的yolov7或者yolov8&am…

python tcp socket中实现SSL/TLS认证

SSL/TLS介绍 官话说SSL是安全套接层(secure sockets layer)&#xff0c;TLS是SSL的继任者&#xff0c;叫传输层安全(transport layer security)。 说白点&#xff0c;就是在明文的上层和TCP层之间加上一层加密&#xff0c;这样就保证上层信息传输的安全。如HTTP协议是明文传输…

大模型LLM Agent在 Text2SQL 应用上的实践

1.前言 在上篇文章中「如何通过Prompt优化Text2SQL的效果」介绍了基于Prompt Engineering来优化Text2SQL效果的实践&#xff0c;除此之外我们还可以使用Agent来优化大模型应用的效果。 本文将从以下4个方面探讨通过AI Agent来优化LLM的Text2SQL转换效果。 1 Agent概述2 Lang…

Flashduty 案例分享 - 途游游戏

Flashduty 作为功能完备的事件OnCall中心&#xff0c;可以接入云上、云下不同监控系统&#xff0c;统一做告警降噪分派、认领升级、排班协同&#xff0c;已经得到众多先进企业的认可。我们采访了一些典型客户代表&#xff0c;了解他们的痛点、选型考虑和未来展望&#xff0c;集…

烟火自动识别预警和监管系统 烟火检测识别系统---豌豆云

烟火自动识别预警和监管系统 烟火检测识别系统—豌豆云 烟火检测报警系统全自动对视频图象信息开展解析鉴别&#xff0c;不用人工控制;及时处理工地监控地区内烟雾、火焰&#xff0c;以更快、最好的形式开展预警信息。 合理的帮助管理者解决&#xff0c;并最大限度的减少乱报…

力扣hot100 二叉树的最近公共祖先 递归

Problem: 236. 二叉树的最近公共祖先 &#x1f468;‍&#x1f3eb; 参考大佬题解 &#x1f496; 图解 时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) &#x1f496; AC code /*** Definition for a binary tree node.*…

Linux网络编程(一-网络相关知识点)

目录 一、网络相关知识简介 二、网络协议的分层模型 2.1 OSI七层模型 2.2 TCP/IP五层模型 2.3 协议层报文间的封装与拆封 三、IP协议 3.1 MAC地址 3.2 IP地址 3.3 MAC地址与IP地址区别 一、网络相关知识简介 互联网通信的本质是数字通信&#xff0c;任何数字通信都离…

微信小程序:flex常用布局

在我们平时微信小程序开发过程中为了页面能达到设计小伙伴的预期&#xff0c;追求还原度&#xff0c;那我们肯定会使用很多常用的布局方式&#xff0c;那我们今天就介绍一下微信小程序中常用的一些flex布局 1、常用flex布局 /** 水平垂直居中 **/ .flex-center {display: fle…

Android Studio点击Run背后发生了什么

文章目录 背景&#x1f4d2;真相 &#x1f418;Projects 和 taskSettings文件build.gradle脚本 Gradle的执行流程 背景&#x1f4d2; 在 Android Studio 中经常点击“RUN”按钮&#xff0c;即可对编写的代码进行编译、打包&#xff0c;安装到目标设备&#xff0c;并运行APP&am…

6.2 声音编辑工具GoldWave5简介(2)

6.2.2转换声音格式 GoldWave5支持多种声音格式&#xff0c;它不但可以编辑扩展名是wav、mp3、au、voc等格式的声音文件&#xff0c;还可以编辑Apple电脑所使用的声音文件&#xff1b;并且GoldWave5还可以把Matlab中的mat文件当作声音文件来处理。利用这些功能可以很容易进行声…

算法32:针对算法31货币问题进行扩展,并对从左往右模型进行总结

本算法是在算法31的基础之上进行推理总结的&#xff0c;因此&#xff0c;在看本章之前&#xff0c;必须先去了解算法31&#xff0c;否则会觉得莫名其妙。 算法31的推理过程&#xff1a; 如果 x y1 y2 y3 y4 y5 y6. x1 y2 y3 y4 y5 y6 那么 x y1 x1. 根据以…

探索 TCP 与 UDP:网络通信的两门学派(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

python学习笔记9(程序的描述方式、程序的组织结构、顺序结构、选择结构1)

&#xff08;一&#xff09;程序的描述方式 自然语言、流程图、伪代码 &#xff08;二&#xff09;程序的组织结构 顺序、选择、循环 &#xff08;三&#xff09;顺序结构 &#xff08;四&#xff09;选择结构1 if 1、条件写法1 2、如果只有一个判断的写法 3、注意冒号和缩进…

网络编程的理论基础

文章目录 1 重点知识2 应用层3 再谈 "协议"4 HTTP协议4.1 认识URL4.2 urlencode和urldecode4.3 HTTP协议格式4.4 HTTP的方法4.5 HTTP的状态码4.6 HTTP常见Header4.7 最简单的HTTP服务器 3 传输层4 再谈端口号4.1 端口号范围划分4.2 认识知名端口号(Well-Know Port Nu…

用通俗易懂的方式讲解大模型分布式训练并行技术:自动并行

之前的文章已经对多种并行技术进行了讲解&#xff0c;如&#xff1a;数据并行、张量并行、流水线并行以及多种并行方式组合使用的多维混合并行。 然而大模型的分布式训练是一个非常复杂的问题&#xff0c;目前的绝大多数的分布式训练系统&#xff0c;都依赖用户人工反复尝试以…

基于Pixhawk和ROS搭建自主无人车(一):底盘控制篇

参考 ArduPilot Development超维空间科技乐迪MiniPix车船使用说明书 1. 硬件篇 1.1 底盘构成一览 1.2 底盘接线示意 2. 软件篇 2.1 APM 固件下载 pixhawk 是硬件平台&#xff0c;PX4 是 pixhawk 的原生固件&#xff0c;APM&#xff08;Ardupilot Mega&#xff09;是硬件平台…

Object.keys()

目录 1、Object.keys() 是什么&#xff1f; 2、Object.keys(obj) 用法&#xff1a; 2.1 如果对象是一个对象&#xff0c;会返回对象的属性名组成的数组&#xff1b; 2.2 如果对象是一个数组&#xff0c;则返回索引组成的数组&#xff1a; 2.3 如果是字符串&#xff0c;返回…

AI系统ChatGPT网站系统源码AI绘画详细搭建部署教程,支持GPT语音对话+DALL-E3文生图+GPT-4多模态模型识图理解

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

基于JavaWeb+BS架构+SpringBoot+Vue+Hadoop短视频流量数据分析与可视化系统的设计和实现

基于JavaWebBS架构SpringBootVueHadoop短视频流量数据分析与可视化系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 目  录 目  录 I 1绪 论 1 1.1开发背景 1 1.2开…

SpringCloud 之HttpClient、HttpURLConnection、OkHttpClient切换源码

SpringCloud 之HttpClient、HttpURLConnection、OkHttpClient切换源码 HttpClient、HttpURLConnection、OkHttpClient区别切换HttpClient 源码分析总结切换HttpClient源码验证切换是否成功okHttpClient 切换源码分析总结 okHttpClient 切换源码同时开启 okHttp 与httpClient 会…