Javascript 嵌入式视频的奇怪行为&；v-if

我正在为一个项目创建一个视频弹出/覆盖，在这个项目中，视频可以在大型播放器或小型播放器中观看，并遇到了这种非常奇怪的行为。当视频较大时，我希望显示标题和描述，当视频较小时，隐藏标题和描述。因此，我只是在标题和描述中添加了一个

v-if

指令，并根据视频是否以大状态显示来切换这些指令

奇怪的行为是，在播放嵌入式视频时，当视频大小改变时，iframe被迫重新加载，，但只有在iframe前面和后面直接跟着标题和说明，并带有

v-if

指令时。如果您完全更改了这种排列方式，无论是通过将一个图元移动到另一个位置，还是通过div围绕一个图元，行为都会停止

有人知道为什么会发生这种行为，或者这是一个bug吗

我在下面的jFIDLE链接中复制了这种行为：

（工作不正常）

（按预期工作）

脚本：

  data:{
    vidLarge: true,
    vidWidth: window.innerWidth * .45,
    vidHeight: (window.innerWidth * .45 * 9) / 16,
  },
  methods:{
    toggleLarge(){
         this.vidLarge = !this.vidLarge;
       this.vidWidth = this.vidLarge ? window.innerWidth * .45 : 150;
       this.vidHeight = (this.vidWidth * 9) /16;
    }
   },

模板：（行为怪异）

视频1
Vue教程

切换大小

模板：（工作正常）

视频1
Vue教程
切换大小
或
视频1
Vue教程

切换大小

您也可以在堆栈溢出上创建vue代码段。（同时：）@adiga谢谢我知道这一点。我更喜欢JFIDLE。您也可以在堆栈溢出上创建vue代码段。（同时：）@adiga谢谢我知道这一点。我更喜欢小提琴。

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>
      <p v-if="vidLarge">A Vue Tutorial</p>
    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <p v-if="vidLarge">A Vue Tutorial</p> <!-- moved above iframe -->
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>

    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

   or.....

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>
      <div> <!-- separate from iframe with another element -->
        <p v-if="vidLarge">A Vue Tutorial</p>
      </div>
    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>