如何在满足 v-if 条件之前停止视频下载答案

【问题标题】：How to stop video download until a v-if condition is satisfied如何在满足 v-if 条件之前停止视频下载
【发布时间】：2021-04-20 09:43:15
【问题描述】：

我的实际 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/

【问题讨论】：

这是因为您使用的是DOM模板。甚至在页面上初始化 Vue 之前，浏览器都会解析整个 HTML。当它看到有效的video 元素和有效的src 属性时，它将启动下载（在执行任何Vue 代码之前）。所以我想下面的两种解决方案都应该有效。另一种方法是将video 元素包装到自定义组件中或使用<component is="video"

标签： vue.js vuejs2 vuejs3

【解决方案1】：

我不确定这是否是最好的方法，但这是可行的。您可以将src 路径放在计算属性中，然后仅在showVideo 为true 时将其绑定到视频元素上

<div id="app">
  <video v-if="showVideo" autoplay loop muted width="450" :src="downloadSrc"></video>
  <video v-if="showVideo" autoplay loop muted width="450" :src="downloadSrc"></video>
</div>

new Vue({
  el:"#app",
  data:{
   showVideo : true
    
  },
  computed: {
    downloadSrc(){
        return this.showVideo ? 'https://www.w3schools.com/tags/movie.mp4' : '';
    }
  }
})

【讨论】：

【解决方案2】：

如果您将video 嵌入到具有v-if 属性的template 中，则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>

【讨论】：

这个有效。谢谢@ingham。 <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>
不客气，如果对您有帮助，请点击左侧的复选标记，随时接受答案:)