vue数据更新视图不响应 --- v-lazy图片不更新？用:src绑定可以更新

最新推荐文章于 2024-02-29 22:21:34 发布
最新推荐文章于 2024-02-29 22:21:34 发布
阅读量925 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zly_101/article/details/92415365
版权

官方文档上说：
data 中存在的属性才是响应式
并且可以响应一下方式的更改：
1. =
2. $set
3. $watch
4. 。。。。。
以上都不是重点：
用了，然并卵，v-lazy要绑定key才会刷新

终极ZLY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
`v-model` 指令在 Vue 中用于实现视图和模型之间的双向数据绑定，它使得表单元素的值能够实时反映到 Vue 实例的数据对象中，反之亦然。在本文中，我们将深入探讨 `v-model` 的基础用法和在不同表单元素上的应用。 1...
vue-lazyload 图片不更新
weixin_30655219的博客
05-21 134
前几天在用vue写项目的时候，因为图片比较多，所以采用了懒加载插件 vue-lazyload github:https://github.com/hilongjw/vue-lazyload#readme npm $ npm i vue-lazyload -S Main.js import VueLazyload from 'vue-lazyload' Vue.us...
vue-lazyload,图片不刷新的问题
Isaac_Play的博客
10-16 930
vue-lazyload，是一个很好用的图片懒加载插件，他可以在图片加载中和加载失败的时候预设占位的图片，让产品的交互更加美观和人性化，但最近我发现了一个问题：当页面首次进入的时候，v-lazy可以正确的区分加载图片地址的正确与否，正确的展示图片，但当我退出页面重新进入的时候，就发现v-lazy默认图片加载是error的了 明明图片是可以打开的，状态还是error，刷新页面会出现，首次进入页面也会出现，只有退出页面重新进入的时候不能正确展示，所以初步判断问题的原因是因为缓存 <div v-lazy
在vue.js路上遇到的小坑 ----------------------v-lazy加载图片失败 不显示默认图片
若如流水 淡淡流过
08-03 1万+
我相信很多初学者跟我一样在vue的路上一波三折吧！从安装到打包 处处都是小坑 首先 我们 cnpm  vue-lazyload --save后在main.js里引入 import VueLazyLoad from 'vue-lazyload'//加载后台图片 Vue.use(VueLazyLoad,{  error:引入图片的路径,    loading:l引入图片的路径， }) 在此你...
vue3中数据更新，视图没有更新解决方案
Yang_Ming_Lei的博客
03-25 4488
Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候，当我们对象再次赋值，我们发现数据已经修改成功，但是页⾯并没有自动渲染成最新的数据；
vue-lazyload v-lazy本地、url 、背景、循环时候 4种使用方法
q915730058的博客
05-25 1075
【代码】vue-lazyload v-lazy本地、url 、背景、循环时候 4种使用方法。
vue 入门，v-model数据绑定
05-03
`v-model`是Vue中的一个指令，用于实现双向数据绑定，它使得视图（View）与模型（Model）之间的数据同步变得简单。这种机制让开发者能够在用户界面的表单控件上直接操作数据，同时更新视图，极大地提高了开发效率。 ...
Vue中的v-model指令的原理是什么？vue文章经典面试题vue文章经典面试题
最新发布
06-21
在Vue中，`v-model` 指令是用于实现双向数据绑定的关键特性，它使得视图（View）与模型（Model）之间的数据同步变得极其简单。接下来，我们将深入探讨 `v-model` 的原理及其在实际应用中的使用。 `v-model` 的核心...
面试题：Vue.js 中的双向数据绑定是如何实现的？
02-16
总的来说，Vue.js 的双向数据绑定是通过响应式系统、事件监听和 `v-model` 指令协同工作来实现的，为开发者提供了一种强大且直观的方式来处理用户输入与数据模型之间的交互。理解和掌握这一机制对于深入学习 Vue.js ...
vue-978-1-8389-8482-3:使用 Vue.js 的前端开发项目
05-30
6. **表单处理**：Vue提供了方便的表单处理机制，如v-model指令可以直接将表单控件的值与数据模型绑定，配合修饰符（.lazy、.number、.trim等）可以实现更灵活的表单数据处理。 7. **过渡效果**：Vue内置了基于CSS...
Vue进阶——懒加载v-lazy
秋书一叶的博客
10-13 2702
图片懒加载是一种网页性能优化技术，它允许在页面加载时仅加载可见区域内的图像，从而减少初始页面加载时间和网络带宽使用。这意味着图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。Vue.js通常不提供直接的图像懒加载功能，但可以使用一些库和插件来实现图像懒加载。其中，vue-lazyload 是一个常用的Vue.js插件，可以实现懒加载。使用 Composition API 来管理组件的状态。
v-lazy懒加载的作用与使用
热门推荐
virtrayの升级笔记
10-20 1万+
使用懒加载的目的： 当页面需要加载大量图片时（需要向下滚动页面），使用懒加载可以实现只优先加载页面可视区域的图片，从而使得页面加载更为流畅。 使用步骤： 1、安装： cnpm i vue-lazyload -S 2、main.js： import Vue from 'vue' import App from './App.vue' //添加以下两行代码 //------------------------------- import VueLazyload from 'vue-lazylo
Vue3实现图片懒加载及自定义懒加载指令
~~~
08-12 7958
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
v-lazy
tianruine的博客
06-08 2166
思路：刚开始通过install方法进行挂载一个插件，也就是我们自己封装的v-lazy,有两个参数，一个vue:是vue的构造器,一个options:是在vue.use的时候传入的值，在自定义参数的时候用的bind方法，用到里面前两个参数，一个是el：用指令的dom，一个是building参数:里面还好几个参数name:插件的名字，value,用插件里面的值，在用v-lazy='11111',就是111111//接下来就是我们在bind函数的操作了，首先我们在全局封装了两个方法，一个是getScrollPar
Vue2 中自定义图片懒加载指令 v-lazy
forward_xx的博客
09-21 1157
本文基于Vue2 自定义了一个图片懒加载指令 v-lazy，主要涉及的知识有：自定义指令、事件总线、clientHeight与getBoundingClientRect这两个API。
v-lazy自定义懒加载指令
weixin_45478649的博客
02-29 405
【代码】v-lazy自定义懒加载指令的简单实践！
v-lazyload数据变化图片不切换
weixin_33748818的博客
05-10 233
这个问题让我很困惑，明明得到的商品数据已经改变了，但是就图片不变化，随后找到了解决办法，那就是多加一个动态的key <img v-lazy="item.productImage" :key="item._id" alt="商品图片"> 转载于:https://www.cnblogs.com/samsara-yx/p/10845714.html...
封装一个滚动时图片懒加载（v-lazy）指定
m0_51514727的博客
01-16 386
【代码】封装一个滚动时图片懒加载（v-lazy）指定。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值