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>
相关推荐
熊出没2 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN2 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠8 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven1 小时前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试