关于vue.js:vuelazyload的使用

vue-lazyload 说白了，我没下滑到那行就不显示也加载不到那些图

第一步：装置

cnpm i vue-lazyload -S

第二步：引入

在 main.js 里引入

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1,// 加载 1 秒
  error: require('./assets/logo.png'),// 加载不到用这图
  loading: require('./assets/y.png'),// 加载中用这个图
  attempt: 1// 提早用 1 秒
})

第三步：应用

— 在 img 标签中应用

<ul class="img">
   <li v-for="(item, index) in imgList">
      <img v-lazy="item" />
   </li>
</ul>

— 在背景图上应用

<ul class="bgImg"\>    
   <li v-for="(item,index) in imgList" 
       v-lazy:background-image="item">
   </li>
</ul>

残缺代码

<template>
    <div id="app">
        <ul class="img">
            <li v-for="(item, index) in imgList">
                <img v-lazy="item" />
            </li>
        </ul>
    </div>
</template>

<script>
export default {data() {
      return {
         imgList: [require('./assets/img/1.jpg'),
                         // 至
             require('./assets/img/20.jpg')]
        };
    }
};
</script>