用Vue的方式将iframe用<div>包装起来

在Vue中将iframe用<div>包装起来的解决方法如下所示：

HTML模板部分：

<template>
  <div>
    <div class="iframe-container">
      <iframe ref="myIframe" :src="iframeSrc" frameborder="0"></iframe>
    </div>
  </div>
</template>

CSS样式部分：

<style>
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Vue组件部分：

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://example.com' // 设置iframe的src属性
    };
  }
};
</script>

上述代码中，我们首先在Vue的HTML模板部分使用了一个div作为容器，并添加了一个类名为iframe-container的div来包装iframe。通过设置padding-bottom为56.25%，我们实现了一个16:9的宽高比，这将确保iframe的内容正确显示。

在CSS样式部分，我们设置了iframe-container的样式为相对定位，宽度为100%。我们还设置了iframe的样式为绝对定位，宽度和高度都为100%，这样iframe将填充整个容器。

在Vue组件部分，我们将iframe的src属性设置为一个data属性iframeSrc，你可以根据自己的需求来设置iframe的src链接。

这样，我们就成功地将iframe用<div>包装起来了。