1.vue2.0动态更新video标签的autoPlay属性不起作用
<video
v-if='item.options.video.autoPlay'
:src="`${host}${item.options.src.url}`" alt=""
:height="item.options.src.height"
:width="item.options.src.width"
:autoplay='true'
controls>
</video>
<video
v-else
:src="`${host}${item.options.src.url}`" alt=""
:height="item.options.src.height"
:width="item.options.src.width"
controls>
</video>
一直觉得,是重新渲染了dom结构,但是其实只是增删了属性
vue diff算法中避免性能问题,导致我们动态切换autoPlay值得时候并不能直接看到效果,
解决方案
<video
v-if='item.options.video.autoPlay'
:src="`${host}${item.options.src.url}`" alt=""
:height="item.options.src.height"
:width="item.options.src.width"
:autoplay='true'
key='video-1'
controls>
</video>
<video
v-else
:src="`${host}${item.options.src.url}`" alt=""
:height="item.options.src.height"
:width="item.options.src.width"
:key='video-2'
controls>
</video>
设置了key
值,vue会认为这个是两个不同的dom,所以就会直接重新渲染,就能看到autoPlay的效果
以下写法更简单
<video
:src="`${host}${item.options.src.url}`" alt=""
:height="item.options.src.height"
:width="item.options.src.width"
:autoplay='item.options.video.autoPlay'
:key='`${item.options.video.autoPlay}`'
controls>
</video>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。