Vue(定时器)解决mounted不能获取到data中的数据问题


Posted in Javascript onJuly 30, 2020

vue中data定义

data() {
  return {
  isok:10,
}
}

在vue中使用定时器 如下 mounted是钩子函数

mounted(){
 
 console.log(this.isok)  //能获取isok 10
 setInterval(function(){
 console.log(this.isok) //不能获取 isok
}, 3000);
 
}

这是为什么呢?

原因就是:定时器的this是指向 window的。

那有什么方法来解决这个问题呢?答案是有的,两种

第一种:

用箭头函数:箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;

mounted(){
 setInterval(()=>{ consolog.log(this.isok) }, 3000);
 }

第二种:

使用 var that = this ,就可以正常调用了。

mounted(){
  var that=this;
  setInterval(()=>{
  console.log(that.isok)
  }, 3000);
 }

补充知识:vue 根据指定字段排序使用computed 方法

我就废话不多说了,大家还是直接看代码吧~

<div id="app">
   <ul>
    <li v-for="(stu,index) in students1">{{stu}}</li>
   </ul>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",
    data:{
     students:[
      {name:"小a",age:20},
      {name:"小b",age:21},
      {name:"小c",age:18},
      {name:"小d",age:19},
      {name:"小f",age:18}
     ]
    },
    computed:{
     students1:function(){
      return sortKey(this.students,'age')
     }
    }
   })
   function sortKey(array,key){
    return array.sort(function(a,b){
     var x = a[key];
     var y = b[key];
     return ((x<y)?-1:(x>y)?1:0)
    })
   }
  </script>

以上这篇Vue(定时器)解决mounted不能获取到data中的数据问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
详解Node.js模板引擎Jade入门
Jan 19 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
js实现计时器秒表功能
Dec 16 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
原生JavaScript实现幻灯片效果
Feb 19 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
You might like
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Javascript 对象的解释
2008/11/24 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
科研先进个人典型材料
2014/01/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Redis如何实现分布式锁
2021/08/23 Redis
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS