前几天在用vue写项目的时候,因为图片比较多,所以采用了懒加载插件 vue-lazyload
github:https://github.com/hilongjw/vue-lazyload#readme
npm
$ npm i vue-lazyload -S
Main.js
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)
<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li> </ul>
但是发现一个bug, 数据更新之后,图片并没有更新,DOM绑定的图片不会变
经过查看了Issuse 看到之前有朋友提出过这一问题,原来需要加个 key,图片就可以动态切换了
<ul> <li v-for="img in list"> <img v-lazy="img.src" :key="img.src" > </li> </ul>
这样,图片就可以自动更新了