vue iframe

作者：ら非你不取丶发布日期:2025-03-13 浏览:303

<!DOCTYPE html>
<html>
<head>
  <title>Vue iframe 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <iframe 
      :src="iframeSrc" 
      width="600" 
      height="400" 
      title="示例 iframe"
      frameborder="0"
    ></iframe>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '这是包含 iframe 的 Vue 示例',
        iframeSrc: 'https://www.example.com' // 你可以替换为任何你想要加载的 URL
      }
    });
  </script>
</body>
</html>

解释说明：

Vue 实例：我们创建了一个 Vue 实例，并将其挂载到 #app 元素上。
数据绑定：通过 data 属性定义了两个变量：message 和 iframeSrc。message 用于显示页面上的文本，而 iframeSrc 则是 iframe 的源 URL。
动态绑定属性：使用 v-bind 指令（简写为 :）将 iframeSrc 绑定到 iframe 的 src 属性，从而实现动态加载不同的网页内容。
iframe 标签：在 HTML 中插入了一个 iframe 标签，并设置了宽度、高度和其他属性。

上一篇：vue开发

下一篇：vue 路由跳转