vue-cli2嵌入html

1.使用iframe

<!-- 相对路径/绝对路径 -->

<iframe src="../../../static/zsw.html"></iframe>

<!-- 网址 -->

<iframe src="https://cn.vuejs.org/v2/api/#v-html"></iframe>

2.使用v-html

<template>

  <div class="mod-config">

    <span v-html="html"></span>

  </div>

</template>

<script>

  export default {

    data () {

      return {

        html: '',

      }

    },

　　　 created () {

　　let param = {

　　accept: 'text/html, text/plain'

　　}

　　let url = 'https://cn.vuejs.org/v2/api/#v-html'

　　// let url = './static/html/disk.html'

　　this.$http.get(url, param).then((response) => {

　　this.loading = false

　　// 处理HTML显示

　　this.html = response.data

　　).catch(() => {

　　this.loading = false

　　this.html = '加载失败'

　　})

　　this.getCaptcha()

　　}

  }

</script>

还会出现跨域的情况

3.iframe和v-html的区别

如果是直接引入html文件，v-html只加载html文件中的行内元素和内嵌样式，不加载外部样式（因此也可能不会加载外部的js脚本）。iframe可以加载外部的资源。

4.vue-cli的静态目录

在Vue-cli 2.0 构建的项目中使用 iframe 引用本地静态 html 文件，放在 static文件夹下。
在Vue-cli 3.0 构建的项目中使用 iframe 引用本地静态 html 文件，放在 public 文件夹下。
推荐：https://blog.csdn.net/rudy_zhou/article/details/106003587

巴特西

vue-cli2嵌入html

1.使用iframe

2.使用v-html

3.iframe和v-html的区别

4.vue-cli的静态目录

最新文章

热门文章