vue中video视频路径改变,dom不更新问题

效果展示

视频切换前

视频切换后

完整代码

html 复制代码
<template>
    <!-- 设置v-if只在路径有值时,标签才存在 -->
    <video v-if="state.videoSrc != null" controls>
        <source :src="state.videoSrc" type="video/mp4"></source>
    </video>
    <div>
        <el-button @click="handleClick">切换视频</el-button>
    </div>
</template>

<script setup name="videoUpdate">
import { onMounted, reactive, nextTick } from 'vue';
// 这是是调用本地视频,但不影响测试切换功能
import staticFile1 from '@/assets/video/2023-07-09-20-59-01.mp4'
import staticFile2 from '@/assets/video/2023-07-13-13-59-36.mp4'

const state = reactive({
    videoSrc: null,//初始videoSrc
})

// 切换视频按钮
const handleClick = async () => {
    // 1.先清空videoSrc
    state.videoSrc = null
    // 2.async配合nextTick等待页面更新
    await nextTick()
    // 3.将videoSrc换成第二个视频路径
    state.videoSrc = staticFile2
}

onMounted(async ()=>{
    // 页面初始化时显示第一个视频
    state.videoSrc = staticFile1
})


</script>

<style scoped>
    video{
        width: 400px;
    }
</style>
相关推荐
我想说一句1 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 分钟前
CommonJS与ESM
前端·javascript
G等你下课3 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven4 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾4 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我4 分钟前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪5 分钟前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构
sophister6 分钟前
你以为的 2025-05-28,其实是另一天:JavaScript 日期解析那些坑与最佳实践
前端·javascript
jackyChan6 分钟前
ES6解构赋值 vs 传统手动赋值:性能真相大揭秘
javascript
国家不保护废物7 分钟前
节流(throttle):给频繁操作加上冷却时间!🔥
前端·javascript·面试