美文网首页
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