vue-懒加载使用全教程

2022-07-04 15:00:16 阅读：118 来源： 互联网

一、使用
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"

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

标签：教程,vue,img,use,item,import,加载
来源： https://www.cnblogs.com/zmh114712318/p/16442939.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-懒加载使用全教程