html代码 js代码输出是 http://localhost :8080/ 直接靠双向绑定src1也赋值不了应该怎么改才可以让src动态赋值呢？

vue项目中，iframe的src动态赋值

纷飞的羽毛

1.9k1514

发布于
2019-09-05

在iframe上加个v-if，利用一个状态来控制iframe的渲染

MrSoul丶LHX

35111019

发布于
2019-09-05

更新于
2019-09-05

在created的生命周期里赋值，beforeCreat生命周期里data还没初始化

前端扫地僧

2.5k52947

发布于
2019-09-05

可以类似这样：

   /**
     * 动态创建iframe
     * @param dom 创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。
     * @param src iframe中打开的网页路径
     * @param onload iframe载入完后触发该事件。能够为空
     * @return 返回创建的iframe对象
     */
    createIframe(dom, src, onload) {
      //在document中创建iframe
      var iframe = document.createElement("iframe");

      //设置iframe的样式
      iframe.style.width = "100%";
      iframe.style.height = "100%";
      iframe.style.margin = "0";
      iframe.style.padding = "0";
      iframe.style.overflow = "hidden";
      iframe.style.border = "none";

      //绑定iframe的onload事件,处理事件的兼容问题
      if (
        onload &&
        Object.prototype.toString.call(onload) === "[object Function]"
      ) {
        if (iframe.attachEvent) {
          iframe.attachEvent("onload", onload);
        } else if (iframe.addEventListener) {
          iframe.addEventListener("load", onload);
        } else {
          iframe.onload = onload;
        }
      }

      iframe.src = src;
      //把iframe载入到dom以下
      dom.appendChild(iframe);
      return iframe;
    },

AAAASSSS

28427

发布于
2019-09-05

需要动态引入改为

self.src1 = require('http://..........');

陈超

214

发布于
2019-09-05

双向绑定需要data里面声明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">

    <iframe :src='src1' width="100%" height="300"></iframe>
</div>
<script>
new Vue({
      el: '#app',
      data: {
          src1:'https://www.baidu.com'
      },
    mounted(){
        this.src1='https://segmentfault.com';
    }
})
</script>
</body>
</html>

vue项目中，iframe的src动态赋值

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？