vue怎么在vue页面执行接口返回的cript标签代码
时间: 2024-03-17 21:46:32 浏览: 65
VUE渲染后端返回含有script标签的html字符串示例
要在Vue页面中执行接口返回的script标签代码,可以使用以下步骤:
1. 使用Vue的$http或axios等工具向后端发送请求获取接口返回的数据;
2. 在接口返回的数据中,找到包含需要执行的script标签的代码;
3. 使用Vue的$nextTick方法等待DOM更新完成后,将script标签插入到页面中;
4. 使用window.eval()方法或者动态创建script标签的方式执行script标签中的代码。
以下是一个示例代码:
```javascript
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
// 发送请求获取接口返回的数据
this.$http.get('/api/getData').then(response => {
// 找到包含需要执行的script标签的代码
const scriptCode = response.data.scriptCode;
// 使用$nextTick方法等待DOM更新完成后,将script标签插入到页面中
this.$nextTick(() => {
const script = document.createElement('script');
script.innerHTML = scriptCode;
document.body.appendChild(script);
// 使用window.eval()方法或者动态创建script标签的方式执行script标签中的代码
window.eval(scriptCode);
});
});
}
}
</script>
```
阅读全文