首页vue后端接口返回两个script代码，如：<script async src="https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); </script>，怎么在当前的vue文件里执行

vue后端接口返回两个script代码，如：<script async src="https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); </script>，怎么在当前的vue文件里执行

时间: 2024-04-03 18:34:39 浏览: 71

可以通过在 Vue 组件的 `mounted` 钩子函数中动态创建 `<script>` 标签，并将接口返回的两个 `script` 代码分别添加到 `<script>` 标签中，即可执行这两段代码。具体实现方法如下： ```html <template> <div>  </div> </template> <script> export default { mounted() { // 动态创建 <script> 标签 const script1 = document.createElement('script') const script2 = document.createElement('script') script1.async = true script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K' script2.innerText = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); ` // 将 <script> 标签添加到 <head> 中 document.head.appendChild(script1) document.head.appendChild(script2) } } </script> ``` 在这个组件的 `mounted` 生命周期钩子函数中，首先创建了两个 `<script>` 标签，然后将第一个 `<script>` 标签的 `async` 属性设置为 `true`，并将其 `src` 属性设置为第一个接口返回的 `script` 代码的地址；将第二个 `<script>` 标签的 `innerText` 属性设置为第二个接口返回的 `script` 代码，这里使用了模板字符串将多行代码合并为一行。最后，将两个 `<script>` 标签添加到 `<head>` 中，代码即可自动执行。

阅读全文