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