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

本文主要是介绍vue中video视频路径改变，dom不更新问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果展示

视频切换前

视频切换后

完整代码

<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.先清空videoSrcstate.videoSrc = null// 2.async配合nextTick等待页面更新await nextTick()// 3.将videoSrc换成第二个视频路径state.videoSrc = staticFile2
}onMounted(async ()=>{// 页面初始化时显示第一个视频state.videoSrc = staticFile1
})</script><style scoped>video{width: 400px;}
</style>

这篇关于vue中video视频路径改变，dom不更新问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---