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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 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
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python flask 多对多表查询功能
2017/06/25 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python 12306抢火车票脚本
2018/02/07 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python配置grpc环境
2019/01/01 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python打包成so文件过程解析
2019/09/28 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
饲料采购员岗位职责
2013/12/19 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
导游词之包公祠
2019/11/25 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python