<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插件详细指南
网友评论