vue中渲染html网页

有的时候我们想在vue中直接显示一个html的网页，如果用富文本方式，那么内容就会太多，
我们希望只需填入url链接
那么怎么处理呢?
直接上代码

步骤一：
新建一个vue文件，命名为"HtmlPanel.vue"，内容如下，直接ctrl+cv即可!
(为简洁，代码经过缩进，在使用时格式化以下即可，不影响使用)

<template>
  <div> <p v-html="html"></p></div>
</template>
<script>
export default {
props: {url: {required: true }},
  data() {return {html: ""};},
  watch: {url(value) {this.load(value);}},
  mounted() {this.load(this.url);},
  methods: {
    load(url) {
      if (url && url.length > 0) {
        let param = {accept: "text/html, text/plain"};
        this.$http.get(url, param).then(response => { this.html = response.data;}).catch(() => {this.html = "加载失败";});
      }
    }
  }
};
</script>

步骤二
使用上述的vue组件
在你的vue页面中添加如下代码

<template>
    <div>
      <HtmlPanel :url.sync="url1"/>
    </div>
</template>
<script>
import HtmlPanel from "../HtmlPanel.vue"; //根据实际路径导入
export default {
  components:{HtmlPanel},
  data() {
    return {
      url1:"http://www.baidu.com",// 这里填写你需要渲染的url网页
    }
  },
}
</script>

OK！就2个步骤，有帮助的话，麻烦点个赞。

此外
如果遇到跨域，那么请到以下这篇文章
https://blog.csdn.net/u010775335/article/details/110857411

HtmlPanel.vue中使用到的this.$http是什么?怎么引入？
只需安装axios

npm install axios -g

并在main.js中添加如下代码即可

import axios from "axios"
Vue.prototype.$http = axios;