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

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中的数据问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue mounted组件的使用

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e

  • 在vue中created、mounted等方法使用小结

    created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值 export default { name: "draw", data(){ // 定义变量source return { source:new ol.source.Ve

  • 解决vue项目F5刷新mounted里的函数不执行问题

    项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

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

    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的. 那有什么方法来解决这个问题呢?答案是有的,两种 第一种:

  • Vue中如何获取json文件中的数据

    目录 场景 实现 场景 访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musictype.json { "currentType":[1,2,11,21,22,23,24,25] } listcate.vue <template lang="html"> <div> <ListCate_List v

  • vue 需求 data中的数据之间的调用操作

    我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么?忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 ...... over 希望

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • 详解如何获取C#类中发生数据变化的属性信息

    一.前言# 在平时的开发中,当用户修改数据时,一直没有很好的办法来记录具体修改了那些信息,只能暂时采用将类序列化成 json 字符串,然后全塞入到日志中的方式,此时如果我们想要知道用户具体改变了哪几个字段的值的话就很困难了.因此,趁着这个假期,就来解决这个一直遗留的小问题,本篇文章记录了我目前实现的方法,如果你有不同于文中所列出的方案的话,欢迎指出. 代码仓储地址:https://github.com/Lanesra712/ingos-common/tree/master/sample/csha

  • 易语言取字节集长度,获取图片框中图片数据的大小

    易语言取字节集长度,获取图片框中图片数据的大小

    取字节集长度命令 英文命令:BinLen 操作系统支持:Windows.Linux    所属类别:字节集操作 取字节集型数据的长度. 语法:  整数型  取字节集长度 (字节集数据) 例程 说明 通过"取字节集长度"命令获取图片框中图片数据的大小. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • Java 读取、获取配置文件.properties中的数据

    java获取配置文件.properties中的数据,具体内容如下所示: 方法太多,只写一种比较简单的. 文件test1.properties内容 test1 = 123; test2=3211 Properties prop = new Properties(); prop.load(new FileInputStream("src/test1.properties")); System.out.println(prop.get("test1")); 输出 123;

  • Mysql字符串截取及获取指定字符串中的数据

    前言:本人遇到一个需求,需要在MySql的字段中截取一段字符串中的特定字符,类似于正则表达式的截取,苦于没有合适的方法,百度之后终于找到一个合适的方法:substring_index('www.sqlstudy.com.cn', '.', -2) 强烈推荐该方法获取含有特定字符的数据. substring_index(input,split,index):input为要截取的字符,split为分隔符,Index为要截取第index个分隔符左(index为正)或右(index为负)的字符串. 拿个

  • PHP获取数据库表中的数据插入新的表再原删除数据方法

    1, 路由 我使用 get (1) 控制器 public function a(Request $request){ //获取指定的id $id = $request->id; $rs=R::find($id); //仓库中 $re=$rs->rfid; //判断仓库中的是否与数据库的rf在线的是否相等 $ws= G::where('rfid','=',$re)->first(); if($ws){ return response()->json(['status'=>0,'

  • 使用wxPython获取系统剪贴板中的数据的教程

    涉及到开发桌面程序,尤其是文本处理,剪贴板就很常用,不像 java 中那么烦锁,wxpython 中访问剪贴板非常简单,寥寥几句足以. # 取得剪贴板并确保其为打开状态 text_obj = wx.TextDataObject() wx.TheClipboard.Open() if wx.TheClipboard.IsOpened() or wx.TheClipboard.Open(): # do something... wx.TheClipboard.Close() 取值: if wx.Th

随机推荐