vue中实现video的动态src绑定

Vue中实现video的动态src

试了网上的$refs方法发现并没有用

解决方案：

通过require方法

 <div>
     <video :src='url' @click='change(2.mp4)'>
         test
     </video>
 </div>
 ​
 ​
 ​
 //js
 data() {
     return {
         url: require('@/assets/video/1.mp4')
     }
 },
 methods: {
     change(url) {
         this.url = require('@/assets/video/' + url)
     }
 }
 ​
 ​

一定要注意change()方法里的require不能直接require(url)！！！！直接完整的url参数是没有任何反应的（妈的）

要是用url拼接才能进行video的动态src

 let url = "@/assets/images/logo.png"
 require(url)    //报错
 ​
 let url = "logo.png"
 require("@/assets/images/"+url); //正确
 复制代码

很诡异，命名拼接后的路径完全一样，但是打开页面 F12 调试时，发现路径被编译成文件名+一些字符编码.png，这可能是通过 webpack 编译后，生成的路径已经不是原来的那个路径了，而通过 require("src/assets/images/logo.png") 中写绝对路径，会被原样保留并自动找到并加载 dist/public/image/logo.2d32dsa2.png 文件，但如果 require 中放入的是变量 URL，编译打包后就找不到原来的路径了，则报错！