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,一经查实,立即删除!

相关文章

C++_vector类

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

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

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

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

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

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

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

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…

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…

Android SDK环境搭建[图解]; 解决问题Done. Nothing was installed.

安装SDK Android SDK环境搭建 依赖java环境,需要自备Java环境 (100%实操成功) 目录 1. 解压&#xff1a;解压到非中文无特殊字符的目录 2. 双击&#xff1a;SDK Manager.exe&#xff0c;不要选全部!不要选全部!不要选全部!(会下很久) 3. 然后勾选组件​ 4. 设置环境变量 …

UM2003A 一款200 ~ 960MHz ASK/OOK +18dBm 发射功率的单发射芯片

UM2003A 是一款工作于 200 ~ 960MHz 频段的单片集成、高性能、可独立运行的 OOK 发射器。内部集成的 OTP 方便用户对各种射频参数以及特色功能进行编程。该芯片以其高集成度和低功耗的设计&#xff0c;特别适用于低成本&#xff0c;低功耗&#xff0c;电池驱动的无线发射应用。…

【TypeScript】入门基础知识

目前在做项目的技术栈是 reacttypescript&#xff0c;之前只知道 ts 是 js 的扩展&#xff0c;增加了类型检查&#xff0c;但是没有仔细的学过&#xff0c;纯纯看别人代码上手 anyscript&#xff08;这很难评...&#xff09;。趁着最近空闲&#xff0c;就学习一下 ts 的基础知识…

章鱼网络 2023 年全回顾|暨12月进展报告

2023年&#xff0c;章鱼网络轻装上阵&#xff0c;身处加密行业的低谷中砥砺前行。 12月17日&#xff0c;经过整整1年时间的开发和打磨&#xff0c;章鱼网络在重磅上线 Octopus 2.0&#xff0c;即 $NEAR Restaking 和 NEAR-IBC&#xff0c;获得了社区和市场的一致认可&#xff…

Java中多线程二

抢占调度模型 概述&#xff1a;优先让优先级高的线程使用 CPU &#xff0c;如果线程的优先级相同&#xff0c;那么随机会选择一个&#xff0c;优先级高的线程获取的 CPU 时间片相对多一些 Thread 类中一些关于线程的方法 方法简述public final int getPriority()返回此线程的优…

自动化控制面板-1Panel

一、1Panel自动化控制面板 官网地址 1Panel 可以实现&#xff1a; 快速建站、高效管理、安全可靠、一键备份、应用商店 快速建站&#xff1a;深度集成 Wordpress 和 Halo&#xff0c;域名绑定、SSL 证书配置等一键搞定&#xff1b;高效管理&#xff1a;通过 Web 端轻松管理 …

Docker启动报错:No chain/target/match by that name 处理

一、问题描述 某次OS升级重启后&#xff0c;发现docker redis实例无法启动&#xff0c;报错如下&#xff1a; Error response from daemon: driver failed programming external connectivity on endpoint vpm.redis.2 (f4b70fef65000bcacb574ee59e65d9b7a25f2abfa5dec0be9b74…

阿里云实时计算企业级状态存储引擎 Gemini 技术解读

本文整理自阿里云 Flink 存储引擎团队李晋忠&#xff0c;兰兆千&#xff0c;梅源关于阿里云实时计算企业级状态存储引擎 Gemini 的研究&#xff0c;内容主要分为以下五部分&#xff1a; 流计算状态访问的痛点企业级状态存储引擎GeminiGemini 性能评测&线上表现结语参考 一、…

2024年最新ChemiCloud优惠75%折扣WordPress外贸主机

ChemiCloud怎么样&#xff1f;ChemiCloud好不好&#xff1f;ChemiCloud是一家成立于2016年的云虚拟主机提供商&#xff0c;他们在全球范围内拥有多个机房&#xff0c;并以其出色的性价比而备受赞誉。他们整合了许多先进技术&#xff0c;包括Digital Ocean SSD云服务器、LiteSpe…

云计算任务调度仿真03

前面陆续分享了基于policy gradient和DQN实现的深度强化学习任务调度仿真&#xff0c;上次的DQN没有实现fix-qtarget和experience replay&#xff0c;这次再分享实现了这两个方法的DQN任务调度仿真。 经验重放&#xff0c;定义存储和存放次序&#xff0c;这里也可以自行修改 de…