vue.js で v-lazy img

vue.jsを使っているときに lazyload をしたい時がある。

参考
https://github.com/hilongjw/vue-lazyload

画像を直接指定

<div v-lazy-container="{ selector: 'img' }">
    <img data-src="/img/info1.png">
</div>

ループ の中で使う

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

こんな感じでどちらでも使うことができる。