vue iframe 宽高
时间: 2023-06-23 10:09:04 浏览: 41
要设置 Vue 中 iframe 的宽度和高度,可以使用以下方式:
1. 使用 style 属性,直接设置 iframe 的宽度和高度:
```html
<iframe src="https://www.example.com" style="width: 100%; height: 500px;"></iframe>
```
2. 使用 CSS 样式表,为 iframe 添加一个类,然后在样式表中设置宽度和高度:
```html
<style>
.iframe-container {
width: 100%;
height: 500px;
}
</style>
<iframe src="https://www.example.com" class="iframe-container"></iframe>
```
3. 使用计算属性,根据数据动态设置 iframe 的宽度和高度:
```html
<template>
<div>
<iframe :src="url" :style="{ width: iframeWidth, height: iframeHeight }"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://www.example.com',
iframeWidth: '100%',
iframeHeight: '500px',
};
},
computed: {
// 根据数据动态设置 iframe 的宽度和高度
iframeSize() {
return {
width: this.iframeWidth,
height: this.iframeHeight,
};
},
},
};
</script>
```