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

在Vue 3中，可以使用document.title来动态修改浏览器标签的文字，使用favicon来修改图标。以下是一个简单的例子：

<template>
  <div>
    <button @click="changeTitle">Change Title</button>
    <button @click="changeFavicon">Change Favicon</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const title = ref('My Website');
const favicon = ref('favicon.ico');
 
function changeTitle() {
  document.title = `New Title ${new Date().toLocaleTimeString()}`;
}
 
function changeFavicon() {
  const link = document.querySelector('link[rel~="icon"]');
  if (!link) {
    const newLink = document.createElement('link');
    newLink.rel = 'icon';
    newLink.href = favicon.value;
    document.getElementsByTagName('head')[0].appendChild(newLink);
  } else {
    link.href = 'new-favicon.ico'; // 更新favicon路径
  }
}
</script>

在这个例子中，我们定义了两个函数changeTitle和changeFavicon来分别修改标题和favicon。点击按钮时会触发相应的函数。记得替换new-favicon.ico和favicon.ico为你的favicon文件路径。