vue中iframe标签str动态赋值

在 Vue 中动态给 iframe 元素的 src 属性赋值可以通过以下几种方式实现：

1. 使用 Vue 的数据绑定

在 Vue 组件的 template 中使用数据绑定的方式，将 iframe 的 src 属性与组件中的某个变量绑定起来，当变量的值发生变化时，iframe 的 src 属性也会相应地更新。

例如：

<template>
  <div>
    <iframe :src="url"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'http://www.example.com'
    }
  },
  methods: {
    changeUrl() {
      this.url = 'http://www.google.com'
    }
  }
}
</script>

2. 使用 ref 获取 iframe 元素

在 Vue 组件中使用 ref 获取 iframe 元素，然后通过 JavaScript 动态修改 iframe 的 src 属性。

例如：

<template>
  <div>
    <iframe ref="myiframe"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myiframe.src = 'http://www.example.com'
  },
  methods: {
    changeUrl() {
      this.$refs.myiframe.src = 'http://www.google.com'
    }
  }
}
</script>

注意：使用 ref 获取元素需要在 mounted 钩子函数中，因为只有在挂载后才能获取到元素。

3. 使用 v-if 和 v-bind:key 动态创建和销毁 iframe 元素

在 Vue 组件中使用 v-if 和 v-bind:key 动态创建和销毁 iframe 元素，并根据数据来动态设置 iframe 的 src 属性。

例如：

<template>
  <div>
    <iframe v-if="show" :src="url" :key="url"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      url: 'http://www.example.com'
    }
  },
  methods: {
    changeUrl() {
      this.url = 'http://www.google.com'
    }
  }
}
</script>

当 show 值为 true 时，会动态创建一个带有指定 src 属性的 iframe 元素；当 show 值为 false 时，会销毁 iframe 元素。当 url 值发生变化时，根据 v-bind:key 的值重新创建 iframe 元素并更新 src 属性。

以上就是在 Vue 中动态给 iframe 元素赋值的几种方法，可以根据具体的需求选择适合的方式。