vue循环的iframe获取标签
时间: 2023-10-15 11:23:44 浏览: 99
在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标签了。123
引用[.reference_title]
- 1 解决在Vue中使用iframe框架的时候动态传src问题[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - 2 vue用iframe播放海康视频[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - 3 vue整合SSM项目实战[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
相关推荐














