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); // 动态修改网站图标

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Logstash：迁移数据到 Elasticsearch

Logstash：迁移数据到 Elasticsearch

在生产环境中&#xff0c;不使用 Apache Kafka 等流平台进行数据迁移并不是一个好的做法。 在这篇文章中&#xff0c;我们将详细探讨 Apache Kafka 和 Logstash 的关系。 但首先让我们简单了解一下 Apache Kafka 的含义。 Apache Kafka 是分布式流平台&#xff0c;擅长实时数据…
阅读更多...
Qt QRadioButton单选按钮控件

Qt QRadioButton单选按钮控件

文章目录 1 属性和方法1.1 文本1.2 选中状态1.3 自动排他1.4 信号和槽 2 实例2.1 布局2.2 代码实现 Qt中的单选按钮类是QRadioButton它是一个可以切换选中&#xff08;checked&#xff09;或未选中&#xff08;unchecked&#xff09;状态的单选按钮单选按钮常用在“多选一”的场…
阅读更多...
【Python学习】Python学习12-字典

【Python学习】Python学习12-字典

目录 【Python学习】Python学习12-字典 前言创建语法访问列表中的值修改与新增字典删除字典元素Python字典内置函数&方法参考 文章所属专区 Python学习 前言 本章节主要说明Python的字典&#xff0c;是可变的容器&#xff0c;每个字典由键值对组成用冒号隔开&#xff0c;…
阅读更多...
预训练中文GPT2（包括重新训练tokenizer）

预训练中文GPT2（包括重新训练tokenizer）

训练数据 1.json后缀的文件 2.数据是json line格式&#xff0c;一行一条json 3. json结构如下 {"content": "①北京和上海户籍的游客可获得韩国多次签证&#xff1b;②“整容客”可以不经由韩国使领馆、直接在网上申请签证&#xff1b;③中泰免签的实施日期…
阅读更多...
SpringBoot中使用单例模式+ScheduledExecutorService实现异步多线程任务(若依源码学习)

SpringBoot中使用单例模式+ScheduledExecutorService实现异步多线程任务(若依源码学习)

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_本地运行若依前后端分离-CSDN博客 设计模式-单例模式-饿汉式单例模式、懒汉式单例模式、静态内部类在Java中的使用示例&#xff1a; 设计模式-单例模…
阅读更多...
Android SDK环境搭建[图解]； 解决问题Done. Nothing was installed.

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

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

安装ubuntu22.04系统,GPU驱动，cuda,cudnn，python环境，pycharm

需要准备一个u盘&#xff0c;需要格式化&#xff0c;且内存不小于8g 1 下载ubuntu镜像 下载链接&#xff1a; https://cn.ubuntu.com/download/desktop 2下载rufus Rufus - 轻松创建 USB 启动盘Rufus: Create bootable USB drives the easy wayhttps://rufus.ie/zh/ 准备好这…
阅读更多...
用Linux的视角来理解缓冲区概念

用Linux的视角来理解缓冲区概念

缓冲区的认识 缓冲区&#xff08;buffer&#xff09;是存储数据的临时存储区域。当我们用C语言向文件中写入数据时&#xff0c;数据并不会直接的写到文件中&#xff0c;中途还经过了缓冲区&#xff0c;而我们需要对缓冲区的数据进行刷新&#xff0c;那么数据才算写到文件当中。…
阅读更多...
STL之list

STL之list

目录 list定义和结构 list容器模板接受两个参数&#xff1a; list容器的特点 双向性 动态大小 不连续存储 实例 代码输出 需要注意的点 list常用函数 代码示例 list定义和结构 list的使用频率不高&#xff0c;在做题时极少遇到需要使用list的情景。 list是一种双向…
阅读更多...
LeetCode 232.用栈实现队列（详解） (๑•̌.•๑)

LeetCode 232.用栈实现队列（详解） (๑•̌.•๑)

题目描述&#xff1a; 解题思路&#xff1a; 创建两个栈&#xff0c;一个用于入数据&#xff0c;一个用于出数据。分别是pushST和popST; 1.如果是入数据就直接入进pushST 2.如果是出数据&#xff0c;先检查popST中有无数据&#xff0c;如果有数据&#xff0c;就直接出。如果没…
阅读更多...
Xcode15 升级问题记录

Xcode15 升级问题记录

这里写自定义目录标题 新版本Xcode15升级问题1&#xff1a;rsync error: some files could not be transferred (code 23) at ...参考 新版本Xcode15升级 下载地址&#xff1a;https://developer.apple.com/download/all/ 我目前使用的版本是Xcode15.2 我新创建了一个项目&…
阅读更多...
建立四叉树[中等]

建立四叉树[中等]

一、题目 给你一个n * n矩阵grid&#xff0c;矩阵由若干0和1组成。请你用四叉树表示该矩阵grid。你需要返回能表示矩阵grid的四叉树的根结点。四叉树数据结构中&#xff0c;每个内部节点只有四个子节点。此外&#xff0c;每个节点都有两个属性&#xff1a; 【1】val&#xff1…
阅读更多...
使用SpringCache操作Redis缓存数据

使用SpringCache操作Redis缓存数据

SpringCache概念 SpringCache是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单的加一个注解&#xff0c;就能实现缓存功能。 SpringCache提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;例如&#xff1a; EHCacheCaffeineRedis 使…
阅读更多...
怎么在unity3D工程中导入Newtonsoft.Json

怎么在unity3D工程中导入Newtonsoft.Json

打开 Unity 编辑器。 转到菜单栏的 “Window”&#xff08;窗口&#xff09;选项&#xff0c;然后选择 “Package Manager”&#xff08;包管理器&#xff09; 在搜索框中输入 “Newtonsoft Json” 进行搜索。 注意&#xff1a;要选择Unity Registry 在搜索结果中&#xf…
阅读更多...
强化学习求解TSP（五）：Qlearning求解旅行商问题TSP（提供Python代码）

强化学习求解TSP（五）：Qlearning求解旅行商问题TSP（提供Python代码）

一、Qlearning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于奖励的决策问题。它是一种无模型的学习方法&#xff0c;通过与环境的交互来学习最优策略。Q-learning的核心思想是通过学习一个Q值函数来指导决策&#xff0c;该函数表示在给定状态下采取某个动作所获…
阅读更多...
Windows下安装mariadb10.5数据库及配置详细教程

Windows下安装mariadb10.5数据库及配置详细教程

1、简介 MariaDB数据库管理系统是一款MySQL的替代数据库。MariaDB由MySQL的创始人麦克尔维德纽斯主导开发&#xff0c;是可扩展的&#xff0c;可靠的SQL服务器的合乎逻辑的选择&#xff0c;MariaDB 10.5 是 MariaDB 当前的稳定系列。 2、下载 下载地址&#xff1a;Download M…
阅读更多...
【FPGA/verilog -入门学习17】vivado 实现串口自发自收程序

【FPGA/verilog -入门学习17】vivado 实现串口自发自收程序

1&#xff0c;需求 PC使用串口助手给FPGA板发送9600 波特率的数据&#xff0c;FPGA板接收到数据后&#xff0c;回复同样的数据给PC 2&#xff0c;需求分析 按模块可以划分为&#xff1a; rx接收模块&#xff0c;将输入的8位并行rx 数据转换成[7:0]rx_data 信号&#xff0c;当…
阅读更多...
圣诞老人遇见 GenAI：利用大语言模型、LangChain 和 Elasticsearch 破译手写的圣诞信件

圣诞老人遇见 GenAI：利用大语言模型、LangChain 和 Elasticsearch 破译手写的圣诞信件

在北极的中心地带&#xff0c;圣诞老人的精灵团队面临着巨大的后勤挑战&#xff1a;如何处理来自世界各地儿童的数百万封信件。 圣诞老人表情坚定&#xff0c;他决定是时候将人工智能纳入圣诞节行动了。 圣诞老人坐在配备了最新人工智能技术的电脑前&#xff0c;开始在 Jupyter…
阅读更多...
【Linux】Ubuntu 解压 zip、z01、z02等压缩文件的方法，Linux如何解压分卷压缩的

【Linux】Ubuntu 解压 zip、z01、z02等压缩文件的方法，Linux如何解压分卷压缩的

zip分卷压缩&#xff0c;在windows上压缩来的&#xff0c;如何解压这种文件&#xff1a; -rw-rw-r-- 1 20401094656 Dec 10 20:06 FFHQ.z01 -rw-rw-r-- 1 20401094656 Dec 10 20:10 FFHQ.z02 -rw-rw-r-- 1 20401094656 Dec 10 23:22 FFHQ.z03 -rw-rw-r-- 1 20401094656 Dec 10…
阅读更多...
docker微服务案例

docker微服务案例

文章目录 建立简单的springboot项目(boot3)boot2建立通过dockerfile发布微服务部署到docker容器编写Dockerfile打包成镜像运行镜像微服务 建立简单的springboot项目(boot3) 1.建立module 2. 改pom <?xml version"1.0" encoding"UTF-8"?> <…
阅读更多...
最新文章

Copyright @ 2022~2023