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

2019-02-15  本文已影响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插件详细指南

上一篇 下一篇

猜你喜欢

热点阅读