vue-懒加载使用全教程

一、 使用
Lazyload是Vue指令，使用前需要对指令进行注册
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant {Lazyload} from 'vant'
import 'vant/lib/index.css'

createApp(App).use(store).use(router).use（Vant）.use(Lazyload，{
   lazyCommponent:true
}).mount('#app')

使用懒加载之前，记住需要下载指令懒加载的vue指令
npm install vue-lazyload  --save-dev
另外组件使用懒加载需要进行开启
部分官网都是介绍的

<van-card

            :price="item.price"

            :desc="item.desc"

            :title="item.title"

            class="goods-card"

            :thumb="item.img"

            :lazy-load="true"

/>

比如这个是vant说的开启,如果你不开启,就是false,就是没有办法使用所谓的懒加载的

然后在V-for循环的地方,进行

例如:

v-for="(item,index) in Audis" :key="index" v-lazy="item.img"

循环你的图片item.img =>img是你的图片,你的可能不是img,比如你的数组[{image:'图片地址'}]

那就是item.image

这是关于组件的=======================================

如果是自己的写的图片循环那就直接v-for="img in xxx" v-lazy="img"

————————————————