美文网首页
VUE懒加载—vue-lazyload

VUE懒加载—vue-lazyload

作者: 小北呀_ | 来源:发表于2020-05-23 10:26 被阅读0次

1.安装插件:

npm install --save vue-lazyload

2.main.js引入插件

// 引入懒加载
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)

3.img标签使用 v-lazy

<template>
    <div>
         <img v-lazy="pic1">
         <img v-lazy="pic2">

........

<script>
import pic1 from '../static/2.jpg'
import pic2 from '../static/3.jpg'

export default {
    data(){
        return{
            pic1:pic1,
            pic2:pic2,
        }
    },
}
........

3.div标签背景使用


<div class="bg" v-lazy:background-image="pic1"></div>
<div class="bg" v-lazy:background-image="pic2"></div>

相关文章

网友评论

      本文标题:VUE懒加载—vue-lazyload

      本文链接:https://www.haomeiwen.com/subject/igrkahtx.html