1、 cnpm install vue-lazyload
2、main.js
import vue-lazyload from ‘vue-lazyload’
Vue.use(vue-lazyload)
or with options
Vue.use(vue-lazyload,{
loading:"/static/loading-svg/loading-bars.svg" //图片显示之前的默认图片
})
3、vue中 遍历循环
<li v-for="(item,index) in goodsList">
<div class="pic">
<a href="#"><img v-lazy="'/static/' +item.productImage" alt=""></a> //图片动态绑定 要用 v-lazy
</div>
<div class="main">
<div class="name">{{item.productName}}</div>
<div class="price">{{item.salePrice}}</div>
<div class="btn-area">
<a href="javascript:void(0);" class="btn btn--m" @click="addCart( item.productId)">加入购物车</a>
</div>
</div>
</li>