vue axios如何将外部网站链接展示在当前页面
时间: 2023-05-14 08:07:28 浏览: 73
您可以使用Vue Axios的get方法来获取外部网站链接的内容,并将其展示在当前页面上。以下是一个示例代码:
```javascript
<template>
<div>
<h1>外部网站链接展示</h1>
<ul>
<li v-for="link in links" :key="link.id">
<a :href="link.url">{{ link.title }}</a>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
links: [],
};
},
mounted() {
axios.get('https://example.com/links')
.then(response => {
this.links = response.data;
})
.catch(error => {
console.log(error);
});
},
};
</script>
```
在这个示例中,我们使用了Axios的get方法来获取外部网站链接的内容,并将其存储在Vue组件的data属性中的links数组中。然后,我们使用v-for指令将links数组中的每个链接展示在页面上。
相关问题
vue将外部网站链接中内容的一部分展示在当前页面
Vue可以通过使用iframe标签来展示外部网站链接的内容,但是这种方式存在一些安全性问题。另外,Vue也可以通过使用axios库来获取外部网站链接的内容,然后在当前页面中展示所需的部分内容。具体实现方式可以参考相关的Vue教程和文档。