美文网首页
js单文件引入 vue-lazyload 懒加载使用例子

js单文件引入 vue-lazyload 懒加载使用例子

作者: 醉笙情丶浮生梦 | 来源:发表于2019-02-15 15:23 被阅读0次
    <div v-for="(item,index) in imgData" :key="index">
      <!-- <img :src="item.img"> -->
      <!-- 把 :src 改成 v-lazy 即可 需要绑定key否则数据刷新图片不变 -->
      <img v-lazy="item.img" :key="item.img">
    </div>
    
    <script>
      //要写在 new Vue外面
      Vue.use(VueLazyload, {
        error: 'http://iph.href.lu/879x200',
        loading: 'http://iph.href.lu/879x200'
      });
    
      var app = new Vue({
        el: '#app',
        data() {
          return {
            imgData: [{
                img: "http://image.mgtv100.com/cSYz4CbjuaC0TxNQauEkWeTBE1TksIXiGai9cBba.jpeg"
              },
              {
                img: "http://image.mgtv100.com/cSYz4CbjuaC0TxNQauEkWeTBE1TksIXiGai9cBba.jpeg"
              },
              {
                img: "http://image.mgtv100.com/cSYz4CbjuaC0TxNQauEkWeTBE1TksIXiGai9cBba.jpeg"
              },
              {
                img: "http://image.mgtv100.com/cSYz4CbjuaC0TxNQauEkWeTBE1TksIXiGai9cBba.jpeg"
              },
              {
                img: "http://image.mgtv100.com/cSYz4CbjuaC0TxNQauEkWeTBE1TksIXiGai9cBba.jpeg"
              }
            ]
          }
        }
      })
    </script>
    

    参考: 【vuejs插件】vue中使用图片懒加载vue-lazyload插件详细指南

    相关文章

      网友评论

          本文标题:js单文件引入 vue-lazyload 懒加载使用例子

          本文链接:https://www.haomeiwen.com/subject/lcxmeqtx.html