vue中在setTimeout中改变值无效的原因

最新推荐文章于 2022-09-29 14:42:07 发布
最新推荐文章于 2022-09-29 14:42:07 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kratial/article/details/108542586
版权
1.问题：将data属性的值在setTimeout中修改了，但是页面上面没有渲染出来变化的值
2.问题原因：this指向问题 ，正常情况下this指向的是vue实例，而在setTimeout中this指向的是window
3.解决办法：改变setTimeout中的this指向即可
Kratial
关注
专栏目录
vue 里面的setTimeout 延迟函数方法没有生效
qq_38192709的博客
01-14 1544
问题描述： 自己在 vue 里面写了一个延迟函数，但是没有生效，如下 问题解决： 直接上代码： disableBtn: function () { this.queryCheck = false }, submitDate: function () { // 提交日期 console.log(this.monthNmb) console.log(this.dayNmb) this.getData() // 只要重新提交数据，这个方法里面它会重新自己渲染 this.q
vue中的一些知识
zy的博客
01-26 1048
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
vue 解决setTimeOut和setInterval函数无效报错的问题
10-15
主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中setTimeout()不生效解决方案
kilig_CSM的博客
08-17 685
theme: fancy 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 发生背景: 在项目中一个父组件同时引用了两个不同的子组件,其中一个子组件通过v-if判断flag控制渲染,而另外一个子组件能改变flag.当时的需求是当子组件改变flag将另一个子组件显露出来,同时将新渲染出来的子组件添加类名来改变样式.刚开始发现document.ge...
解决vue的变量在settimeout内部效果失效的问题
10-18
今天小编就为大家分享一篇解决vue的变量在settimeout内部效果失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue方法中setTimeout改变变量的值无效
jcoiwenwfkowe的博客
06-21 488
解决Vue方法中setTimeout改变变量的值无效
vue在setTimeout内修改this失效的解决办法
aiyawei123的博客
08-20 5286
当在vue中使用定时器来修改一个变量值的时候，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。 要想setTimeout指向正确的值，可以使用如下方法： 1、使用箭头函数 export default { data () { return { left: -9999, ...
setTimeout 不起作用万能解决方案
wwppp987的博客
10-30 4509
vue当中axios会执行异步请求，但是返回时间并不确定，如果要调用其返回结果的话会产生undefined的情况，除了官方封装axios的promiseall方法外，很多童鞋需要使用setTimeout来解决问题。 然而，setTimeout在created和methods里面有时候会抽风，没有延时，直接执行了信息。 很多童鞋不知道为什么，其实，使我们自己写的不对。 正确写法：【加()=>表示这个是一个function，但是直接用function的话也不行】 setTimeout(()=>thi
vue中使用 setTimeout 函数 失效
m0_58893670的博客
09-29 1198
箭头函数中的访问的this实际上是其父级作用域中的this，箭头函数本身的this是不存在的，这样子就相当于此时函数中的this是在声明的时候就确定了，所以是直接指向了data里面的变量。这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。在vue中使用 setTimeout，直接调用this.函数，控制台报错。
vue项目设置scrollTop不起作用(总结)
10-17
在Vue的生命周期中，直接在数据变化后立即操作DOM，此时DOM可能还未更新完成，导致无法获取到正确的值。通过this.$nextTick()方法，可以确保在DOM更新完成后执行代码块，从而正确获取到滚动容器的scrollTop值。 2. ...
模态对话框导致setTimeout无效的解决方案（二）
08-05
NULL 博文链接：https://rainbow702.iteye.com/blog/2040293
深入解读VUE中的异步渲染的实现
11-20
例如，当在`mounted`钩子中连续改变数据时，Vue只会根据最终的数据状态进行一次渲染，而不是每次更改都更新视图。 总之，Vue的异步渲染机制是通过`nextTick`方法，结合浏览器的异步API，实现数据变化与视图更新之间...
关于vue 结合原生js 解决echarts resize问题
11-20
在Vue组件中，我们可以添加事件监听器，当窗口大小改变时，触发ECharts的`resize`方法： ```javascript window.addEventListener("resize", this.resizeEchart, true); beforeDestroy() { this.observe....
解决在vue中setTimeout效果失效，setTimeout在Vue中的使用方法
bobobocai的博客
01-03 8111
问题：setTimeout 函数内部效果 在Vue 事件中 没有执行 1、定义一个 that 暂存 this 2、再改变变量的值，就会生效 var that = this; setTimeout(function () { that.modPassword = true; }, 3000) ...
vue for循环中使用setTimeout没用 笔记
qq_39960204的博客
04-28 460
vue for循环中使用setTimeout没用 笔记 this.fileList.forEach(file => { setTimeout(() => { console.log(new Date().getTime()) this.fileUpload(file) }, 1000) }) 代码中打印的时间戳并没有延时1s钟，也就是说 setTimeout 这个延时没起作用； 网上找了一些博客，试了都没啥用；请教了一下大牛解决了，这里记录一下 this.fileLi
js 中setTimeout()无效
qq_36457584的博客
07-06 5996
今天使用setTimeout遇到一个小问题，场景是关闭弹框5s后，让屏幕滚到下一页function close(){ setTimeout(scrollToNext(1,4000),5000); } function scrollToNext(){ var content = $(".content").width() * x ;     swipe.scrollTo(cont...
setTimeout 不起作用 失效的原因
热门推荐
未玄的博客
09-06 1万+
定义和用法 settimeout（）方法用于在指定的臺秒数后调用函数或计算表达式。 语法 settimeout(code, millisec) 参数   描述 code         必需。要调用的函数后要执行的 Javascript代码。 millisec     必需。在执行代码前需等待的臺秒数。     注意:这里的 code  是 javascript代码字符串，而不能直接写函数调...
Vue中注册全局组件的三种方式
Kratial的博客
08-25 1万+
1.方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
vue中使用setTimeout
最新发布
09-09
在Vue中使用setTimeout函数可以实现延迟执行某个函数或代码块的效果。然而，在Vue中使用setTimeout时需要注意到一个问题，即setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会导致this指向的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值