极客观点
项目管理
HarmonyOS
是否可以更改 Vue.Js 中高于 body 标签的内容？这两个元素的内容当前都存储在附加到 DOM 树下方元素的 JSON 文件中。
我需要尝试注入一个可以被谷歌抓取的元标题和描述（即它注入，然后在它被抓取之前呈现）并理解访问 body 元素和更高的 DOM 树的问题，因为当前的 Vue JSON 是使用 DIV 下方的 App ID 注入的。
我以前在一些以前的工作中使用过一些 jQuery 代码来解决 Square Space 模板上的这个问题
jQuery('meta[name=description]').attr('content', 'Enter Meta Description Here');
页面 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{items[0][0].meta-desc}}">
<meta name="author" content="">
<title>{{items[0][0].meta-title}}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
<h1 class="display-4">Vue Page Output:</h1>
<h2>{{items[0][0].page1}}</h2>
</div>
<div class="container text-center mt-5">
<h3>Other Pages</h3>
<a href="products.html">Products</a>
<a href="contactus.html">Contact Us</a>
</div>
<!-- /.container -->
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
items: []
},
created: function () {
fetch('test.json')
.then(resp => resp.json())
.then(items => {
this.items = items
})
}
});
</script>
</body>
</html>
JSON
[
[
{
"page1": "Company Name",
"meta-title": "Acme Corp"
"meta-desc": "Welcome to Acme Corp"
}
],
[
{
"products": "Product List"
}
],
[
{
"contactus": "Contact Us at Acme Corp"
}
]
这是实际的代码，传入的 JSON 文件采用固定数组格式，在正文元素旁边包含元详细信息。使这有点棘手。
https://arraydemo.netlify.com/
原文由 Gracie 发布，翻译遵循 CC BY-SA 4.0 许可协议
由于你要改变的是在 Vue 控制的区域之外，所以你只需使用普通的 DOM 操作即可。会是这样的