vue.js - 如何在满足 v-if 条件之前停止视频下载

问题描述

我的实际 vue 项目中有多个视频文件。每个视频都有一些由 v-if 控制的规则。

如果 v-if 为真，那么只有我需要下载视频文件。

目前发生的情况是，即使我们将 v-if 设置为 false，视频文件也是从网络下载的。有没有办法阻止这种行为？

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <video v-if="showVideo" autoplay loop muted width="450" src="https://www.w3schools.com/tags/movie.mp4"></video>
  <video v-if="showVideo" autoplay loop muted width="450" src="https://www.w3schools.com/tags/movie.mp4"></video>
  <div>
  </div>
</div>

示例 JS 小提琴：https ://jsfiddle.net/sajuthankathurai/62n5erju/26/

标签： vue.jsvuejs2vuejs3

如果您将您video的嵌入template到具有该v-if属性的中，则该video标记似乎不会在初始化时进行评估：

<div id="app">
    <template v-if="showVideo">
        <video autoplay loop muted width="450" src="https://www.w3schools.com/tags/movie.mp4"></video>
        <video autoplay loop muted width="450" src="https://www.w3schools.com/tags/movie.mp4"></video>
    </template>
</div>

vue.js - 如何在满足 v-if 条件之前停止视频下载

问题描述

解决方案

推荐阅读