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 相关文章推荐
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
深入理解JS的事件绑定、事件流模型
May 13 Javascript
JS实现520 表白简单代码
May 21 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 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
图书管理程序(一)
2006/10/09 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
详解php命令注入攻击
2019/04/06 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
蛋白质世界:Protein World
2017/11/23 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
关于逃课的检讨书
2014/01/23 职场文书
大学生暑假实习总结
2015/07/13 职场文书
同乡会致辞
2015/07/30 职场文书