vue2.0和vue3.0的Vue-Lazyload的使用

一、vue2.0使用Vue-Lazyload

参考地址以及api配置：GitHub - hilongjw/vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application.

1.安装

npm i vue-lazyload@1.3.3 -S

2.使用插件

//图片懒加载
import VueLazyload from 'vue-lazyload'
//注意内容中引用图片路径:src要改为:v-lazy(使用时一定给一个 key 属性)
Vue.use(VueLazyload, {
  loading: require('./assets/img/common/placeholder.png'),
  error: require('./assets/img/common/error.png'),
})

3.使用v-lazy代替src

    <div v-for="item in goods" :key="item.acm">
      <img v-lazy="item.show.img" :key="item.show.img" :alt="item.title" />
    </div>

        :key=""  必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新！！！ 

二、vue3.0使用Vue-Lazyload

参考官方地址：GitHub - hilongjw/vue-lazyload at next