如何在我的 Vue.js 应用程序之外修改部分 DOM，例如 <link> 标记？
Posted
技术标签:
【中文标题】如何在我的 Vue.js 应用程序之外修改部分 DOM，例如 <link> 标记？【英文标题】：How do I modify part of the DOM outside of my Vue.js app such as a <link> tag? 【发布时间】：2019-08-13 00:10:05 【问题描述】：我有一个 Vue.js 应用程序，其主模板如下所示：
<html>
<head>
<link id="theme" rel="stylesheet" href="foo.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
作为我的 Vue.js 代码的一部分，我可以轻松地修改 #app 中的任何内容，但是稍后我想从一个组件中修改 #theme，其中 <select> 用于选择要使用的主题。
【问题讨论】：
这有关系吗？ ***.com/questions/46730904/… 如果我理解正确的话..您仍然可以像使用 vanilla JS 一样更改<link> 元素的id .. [从任何组件中] document.getElementById("theme").id = "myNewTheme"
【参考方案1】：
使用材料设计颜色 css 制作了一个 JSFiddle：https://jsfiddle.net/rk5ytqs3/2/
在数据中分配主题名称，css url
themes:[
color:'blue', url:'https://code.getmdl.io/1.3.0/material.light_blue-light_green.min.css',
color:'orange', url:'https://code.getmdl.io/1.3.0/material.orange-yellow.min.css',
color:'purple', url:'https://code.getmdl.io/1.3.0/material.deep_purple-red.min.css',
color:'pink', url:'https://code.getmdl.io/1.3.0/material.pink-indigo.min.css',
]
使用 v-for 并将它们分配给选择
<select name="theme" @change="changetheme">
<option v-for="(theme, index) in themes" :value="index">theme.color</option>
</select>
当用户通过方法选择更改主题时
changetheme(event)
let val = event.target.value
document.querySelector('#theme').href = this.themes[val].url
一般来说，在您的应用程序之外修改 DOM 被认为是一种副作用。因此，此代码应该是您的高阶组件的一部分。
【讨论】：
以上是关于如何在我的 Vue.js 应用程序之外修改部分 DOM，例如 <link> 标记？的主要内容，如果未能解决你的问题，请参考以下文章
如何阻止 vue cli3 构建将 vue.js.min 包含在我的 chunk-vendors.js 文件中？