vue循环的iframe获取标签

在Vue中循环渲染iframe标签可以通过v-for指令实现。首先，在data中定义一个包含iframe信息的数组或对象，然后使用v-for指令将数组或对象的每一项渲染为一个iframe标签。具体代码如下：

<template>
  <div>
    <iframe v-for="item in iframeList" :key="item.id" :src="item.src" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeList: [
        { id: 1, src: "http://example.com/iframe1" },
        { id: 2, src: "http://example.com/iframe2" },
        { id: 3, src: "http://example.com/iframe3" },
        // ...
      ]
    };
  }
};
</script>

在上述代码中，我们使用v-for指令将iframeList数组中的每一项都渲染为一个iframe标签。通过:key属性来指定每个iframe的唯一标识，然后通过:src属性来绑定每个iframe的src值。这样就可以循环渲染多个iframe标签了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [解决在Vue中使用iframe框架的时候动态传src问题](https://blog.csdn.net/xiaofangzhen/article/details/126713201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue用iframe播放海康视频](https://blog.csdn.net/weixin_42674490/article/details/123175189)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue整合SSM项目实战](https://download.csdn.net/download/m0_55755339/88241603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]