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.mzph.cn/news/613121.shtml

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

相关文章

报考PMI-ACP总费用是多少?费用明细!

ACP认证是由美国项目管理协会&#xff08;PMI&#xff09;推出的针对敏捷项目管理专业人士的资格认证&#xff0c;由于其高含金量受到了不少小伙伴的追捧。那么这个证书考试费多少钱呢&#xff1f;贵不贵呢&#xff1f;我们来一起探讨下。 PMI-ACP认证考试费用分为三个部分&am…

PostgreSQL 低级错误集锦 (不定时更新)

低级错误真的浪费时间且菜&#xff0c;希望不再犯低级重复错误。 1.to_date()函数日期转换报错 SQL语句&#xff1a; SELECT job_date FROM data_check WHERE data_type S; 查询结果&#xff1a; job_date | ---------- 2023-01-28| 我希望用update语句更新job_date字段&…

golang中的字符串拼接

go中常见的字符串拼接方法 假设我们现在要实现这样一个拼接函数&#xff1a; 将字符串重复n次拼接起来&#xff0c;返回一个新字符串。 方法一&#xff1a;使用运算符 func simpleSplice(s string, n int) string {newStr : ""for i : 0; i < n; i {newStr s}…

一种基于嵌入式的卫星基带信号处理系统的制作方法

一种基于嵌入式的卫星基带信号处理系统的制作方法 随着卫星通信技术的不断发展&#xff0c;卫星基带信号处理系统的性能和稳定性要求也越来越高。传统的卫星基带信号处理系统通常采用分立器件和通用处理器&#xff0c;存在着体积庞大、功耗高、集成度低等问题。为了解决这些问题…

C++_vector类

目录 一、vector的模拟实现 1、vector的组成结构 2、vector尾插数据 2.1 析构函数 3、迭代器实现 4、resize 5、删除数据 5.1 迭代器失效 6、指定位置插入数据 6.1 迭代器失效 7、迭代器构造和resize构造 8、深浅拷贝 结语&#xff1a; 前言&#xff1a; vect…

Linux踢掉远程用户

在Linux系统中&#xff0c;要踢掉远程用户&#xff0c;可以使用以下步骤&#xff1a; 首先&#xff0c;使用 who 或 w 命令查看当前登录的用户及其相关信息&#xff0c;包括IP地址和终端&#xff08;TTY&#xff09;。例如&#xff0c;输入 who 或 w 后回车。找到要踢掉的用户…

vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定&#xff01;今天为大家 展示的内容是&#xff0c;前端开发常见的&#xff0c;form表单里面的&#xff0c;一些输入数据的元素&#xff0c;动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。 首先&#xff0c;老规矩&…

掌握私域运营的四大原则,助你打造精准营销

随着互联网的发展和竞争的加剧&#xff0c;企业越来越重视私域运营的重要性。私域运营可以帮助企业与用户建立更紧密的联系&#xff0c;提高用户忠诚度和粘性&#xff0c;从而为企业带来更多的商业价值。在进行私域运营时&#xff0c;以下四大原则是必须要知道的。 第一、价值…

【人工智能Ⅰ】实验11:支持向量机

实验11 支持向量机 一、实验目的 1&#xff1a;了解支持向量机的结构和原理。 2&#xff1a;应用支持向量机建立训练模型&#xff0c;对模型进行评估。 二、实验内容和要求 【实验内容】 选择支持向量机&#xff0c;对花卉图像或玉米果穗图像进行分类。花卉图像包括玫瑰&a…

关于LINUX操作系统异常宕机重启的分析思路

一、先搞清楚现状 当收到系统宕机告警或者故障反馈时&#xff0c;需要先对情况进行核实。比如检查系统启动时间&#xff0c;是不是真实发生了重启&#xff1f;如果重启了&#xff0c;什么时间点发生的重启&#xff1f;重启了几次&#xff1f;重启之前有无变更操作&#xff1f;…

JavaScript-2

运算符 赋值运算符 -*/% 一元运算符 自增 let num 0 num // 或者 num符号&#xff1a; 作用&#xff1a;让变量的值 1自减 let num 0 num-- // 或者 --num符号&#xff1a;-- 作用&#xff1a;让变量的值 -1比较运算符 符号描述>左边是否大于右边<左边是否小于右…

PyTorch|构建自己的卷积神经网络——nn.Sequential()

之前在构建神经网络时&#xff0c;我们一般是采用这种方式&#xff0c;就像这样&#xff1a; class Network1(nn.Module): def __init__(self): super(Network1,self).__init__() self.conv1 nn.Conv2d(in_channels3, out_channels6, kernel_size5) …

【控制篇 / 策略】(7.4) ❀ 03. 地理地址对象在路由中的应用 ❀ FortiGate 防火墙

【简介】如何做到访问国内走Wan1&#xff0c;访问国际走Wan2 &#xff1f;当企业有多条宽带&#xff0c;特别是有国际专线的时候&#xff0c;这个需求就很普遍了。通过地理地址对象可以快速的解决这些问题。 策略路由 当我们有多条宽带的时候&#xff0c;我们有两种方法分流&am…

GO数据库操作

Golang 出色的 ORM 库为 GORM。 官网文档&#xff1a;https://gorm.io/docs/ 我们来说说增删改查的用法&#xff0c;更深入的研究可以去官网看看。 GORM功能概览&#xff1a; 关联&#xff08;有一个、有多个、属于、多对多、多态性、单表继承&#xff09;挂钩&#xff08;创…

C++的虚基类

前言 本文介绍C的虚基类 先看一个问题 先看一段代码 #include <iostream> class A { public:int a 1; };class B1:public A { public:int b1 2; };class B2 :public A { public:int b2 3; };class C1:public B1,public B2 { public:int c1 4; };int main(int arg…

每日汇评:黄金多头能否在美国CPI数据发布后占有主动权?

黄金价格再次在2020美元附近找到支撑&#xff0c;因为所有人都在关注美国的通胀数据&#xff1b; 尽管最近美国国债收益率有所上升&#xff0c;但美元仍进一步下跌&#xff1b; 金价保持在21日移动均线和50日移动均线之间&#xff0c;等待区间突破&#xff1b; 在周四早盘的亚洲…

SIT1050ISO具有隔离功能,1Mbps,高速 CAN 总线收发器

➢ 完全兼容“ ISO 11898 ”标准&#xff1b; ➢ 内置过温保护&#xff1b; ➢ 100kV/s 瞬态抗扰度&#xff1b; ➢ 显性超时功能&#xff1b; ➢ -40V 至 40V 的总线故障保护&#xff1b; ➢ I/O 电压范围支持 3.3V 和 5V MCU &#xff1b; ➢ 低环路延迟…

解决原生微信小程序获取关联公众号的code(不是wx.login的code)来获取公众号的openId

解决步骤 以下是使用 web-view 并配配合微信公众号提供的 网页授权 来实现 1、在小程序中做一个web-view页面&#xff0c;页面中只需要写微信 网页授权的链接就行了&#xff0c;注意appid请自行替换&#xff08;公众号的&#xff09;。 onLoad() {this.setData({src: https://o…

【Linux】蓝牙配对失败,org.bluez.Error.AuthenticationRejected

问题 蓝牙配对失败&#xff0c;报错&#xff1a;org.bluez.Error.AuthenticationRejected 解决方法 bluetoothctl disconnect MAC地址 untrust MAC地址 remove MAC地址然后重新 scan on scan off pair MAC地址// 如果出现提示&#xff0c;请输入PIN&#xff1a; PIN code: #…

欧盟全球大气排放数据库(EDGAR)

EDGAR&#xff0c;全称Emissions Database for Global Atmospheric Research&#xff0c;是欧盟的联合研究中心&#xff08;JRC&#xff09;发布的。官网&#xff1a;https://edgar.jrc.ec.europa.eu/ EDGAR v8.0 提供 1970~2022 年三种主要温室气体&#xff08;CO2、CH4、N2O…