VUE页面实现加载外部HTML的方法

最新推荐文章于 2024-07-25 09:37:37 发布

程知农

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量1.3k

点赞数

分类专栏： IT_前端开发_Web 文章标签： vue.js html

原文链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/79416039

版权

IT_前端开发_Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

VUE页面实现加载外部HTML的方法

本文思路是把HTML的数据请求回来，以v-html的形式加载到vue页面内部。

HtmlView.vue文件的代码如下：

<template>
    <div>
        <p v-html="htmlData" style="width: 100%; height: 100%;"></p>
    </div>
</template>
<script>
    export default {
        props: ['url'],
        data() {
            return {
                htmlData: ''
            }
        },
        watch: {
            url(value) {
                // console.log("track_watch");
                this.load(value);
            }
        },
        mounted() {
            // console.log("track_mounted");
            this.load(this.url);
        },
        methods: {
            load(urlValue) {
                console.log("track_load_htmlData");
                if (urlValue && urlValue.length > 0) {
                    console.log("track_load_htmlData_1");
                    // let param = {
                    //     accept: 'text/html, text/plain'
                    // };
                    // this.$http.get(urlValue, param).then((res) => {
                    //     this.htmlData = res.data;
                    // }).catch(() => {
                    //     this.htmlData = '加载失败';
                    // });

                    // 假设成功请求到了的数据。
                    this.htmlData = '<!DOCTYPE html><html><head> <meta charset=\"utf-8\"> <title>Web教程</title> </head><body><h6>单元格跨两列:</h6><table border=\"1\"><tr>  <th>Name</th>  <th colspan=\"2\">Telephone</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 855</td>  <td>555 77 856</td></tr></table><h6>单元格跨两行:</h6><table border=\"1\"><tr>  <th>First Name:</th>  <td>Bill Gates</td></tr><tr>  <th rowspan=\"2\">Telephone:</th>  <td>555 77 855</td></tr><tr>  <td>555 77 856</td></tr></table></body></html>';
                } else {
                    console.log("track_load_htmlData_2");
                }
            }
        }
    }
</script>
<style>
</style>

参考地址：https://blog.csdn.net/wojiaomaxiaoqi/article/details/79416039

程知农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE页面实现加载外部HTML的方法

VUE页面实现加载外部HTML的方法本文思路是把HTML的数据请求回来，以v-html的形式加载到vue页面内部。HtmlView.vue文件的代码如下：<template> <div> <p v-html="htmlData" style="width: 100%; height: 100%; background-color: #f3f3f3;"></p> </div></templa.
复制链接

扫一扫

专栏目录