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>

fashen007
4.7k 声望156 粉丝

被偏爱的,有恃无恐吧了