vue 中 video标签数据（src）改变，页面不刷新

最新推荐文章于 2024-04-11 10:54:38 发布

前端大鹌鹑

最新推荐文章于 2024-04-11 10:54:38 发布

阅读量1.5k

点赞数 5

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/lovecoding1/article/details/127768705

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.场景描述：

video标签组件，我在审核页面不有视频审核这一项吗，我就封装了一个videocard这个组件，通过把列表渲染出来的URL，传给组件，当点击不同审核视频时传给我视频组件url播放不同视频，但是我这video标签不刷新，我都点下一个视频了，数据也同步过去了，但是video标签没有更新，展示的还是原视频。

原代码

<video controls autoplay preload>
   <source :src="judgeData.video" type="video/mp4" />
</video>

2.解决办法

<video :src="judgeData.video" controls autoplay preload>
//改成这样 当我们获取到的judgeData.video发生变化时，就会自动更新视频播放
</video>

优惠劵

前端大鹌鹑

关注关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue 中 video标签数据（src）改变，页面不刷新

vue 中 video标签数据（src）改变，页面不刷新
复制链接

扫一扫

专栏目录

vue主动刷新页面及列表数据删除后的刷新实例

10-18

今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决vue 路由变化页面数据不刷新的问题

08-27

下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1 条评论您还未登录，请先登录后发表或查看评论

vue中video标签，仅允许一个播放，其余暂停播放；vue获取不到video.length

热门推荐

萝卜砸大坑

11-21

9万+

this.$set(this.form,'img',res.data.file_name);

vue2的双向数据绑定原理，以及修改数据页面不更新的原理和解决方案

Baby_加油_的博客

10-21

3449

vue2的双向数据绑定原理，以及修改数据页面不更新的原理和解决方案

vue keep-alive缓存下 video src改变页面不刷新

小妹的博客

06-03

676

video 的 src值改变了，但是页面视图视频未更新解决方案： video的src不要绑定在source标签的src上，而是直接绑定video标签的src属性上

Vue视频播放（Video）

q2724338648的博客

11-10

2869

可自定义设置以下属性：视频文件url（src），必传，默认 ''，支持网络地址https和相对地址require('...')视频封面url（poster），默认 ''，支持网络地址https和相对地址require('...')在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s视频播放器宽度（width），默认为800px视频播放器高度（height），默认为450px视频就绪后是否马上播放（autoplay），默认为false。

vue中video绑定的值发生了改变页面video标签并未刷新的解决方案

个人笔记

11-07

1172

vue中video绑定的值发生了改变页面video标签并未刷新的解决方案

Vue2视频播放（Video）

Mr Dear的博客

10-10

3万+

Vue2简易封装的视频播放组件

video 页面手动刷新之后不再自动播放

qiaoqiaoBigBoss的博客

11-11

307

未加muted属性，导致页面手动刷新之后不再自动播放 <video class="alltuu-videoCase-banner-videoBg" autoplay loop muted src="../images/bannerBg.mp4"></video> muted属性静音属性未加muted属性，导致页面手动刷新之后不再自动播放 ...

vue单页应用在页面刷新时保留状态数据的方法

10-17

今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue刷新修改页面中数据的方法

10-18

今天小编就为大家分享一篇Vue刷新修改页面中数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue2.0页面前进刷新回退不刷新的实现方法

10-18

主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况

m0_55333789的博客

08-09

1万+

（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况

Vue数据更新但页面没有更新的多种情况

m0_67401499的博客

03-06

1万+

Vue数据更新但页面没有更新的多种情况 1、Vue 无法检测实例被创建时不存在于 data 中的变量原因：由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化，所以变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如： new Vue({ data:{}, template: '<div>{{message}}</div>' }) this.message = 'Hello world !' // `messag

Vue数据更新，页面却没有更新的几种情况及解决方法

LFQP_的博客

03-27

2万+

Vue数据更新，页面却没有更新的几种情况及解决方法

2023.3.22 Vue 数据更新了但页面没有更新的情况

小龙跳动的博客

03-22

3665

具体的场景不一样，解决问题的方法也不一样。这一句引起的，因为触发了setter，所以单看上述例子，具有响应式特性的数据只有message这一层，它的动态添加的属性是不具备的。那是因为Vue.js的DOM更新是异步的，即当setter操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新执行的时候，此时text属性已经赋值，所以指令更新模板时，得到的是新值。一开始，我们在data对象中，只是声明了一个message空对象，并不具有text属性，所以该text属性是不具有响应式特性的。

vue项目动态src ，video无法正常播放问题记录

qq_43399210的博客

05-07

4627

在vue2项目中，mp4视频地址由后端异步请求获取，使用静态的url时视频能够正常播放，异步请求获取视频地址，视频出现无法播放的问题。

vue路由改变页面不刷新原因

09-18

Vue的路由切换页面不刷新是由于Vue采用了单页应用（Single Page Application, SPA）的开发模式。单页应用是指只有一个HTML页面的应用，通过动态的改变页面的内容来实现不同的页面展示效果，而不是每次刷新整个页面。在传统的多页应用中，每次页面切换都会发起一个新的http请求，然后服务器返回一个完整的HTML页面，页面刷新就是浏览器通过加载新的HTML页面来实现的。而在Vue的单页应用中，浏览器在加载页面时会先加载一个index.html文件，然后通过使用Vue的路由机制，在不刷新页面的情况下改变URL路径，并借助Vue的内部机制来动态更新页面内容。这意味着整个页面只有一个HTML文件，所有的数据交互和页面变化都通过JavaScript来完成。因此，当Vue的路由切换时，页面不刷新的原因是因为只是改变了URL路径，并没有重新加载整个页面。Vue使用了虚拟DOM（Virtual DOM）的概念，在切换路由时，通过监测数据的改变，重新构建虚拟DOM，并与原始的虚拟DOM进行插入、删除、更新等操作，从而只更新需要变化的部分，提高了页面的性能和体验。这样的设计模式可以带来许多好处，如减少网络请求、提高页面加载速度、提升用户体验等。但也需要注意，在一些特殊情况下，比如页面切换后需要重新加载数据，我们需要手动控制页面的刷新。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交