vue中let that=this的作用及说明

 更新时间:2022年10月18日 14:50:31   作者:晚风914  
这篇文章主要介绍了vue中let that=this的作用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue let that=this的作用

this 会随着上下文环境而变换它的指向,在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。

```javascript
$("#btn").click(function(){
    var that = this;//这里this和that都代表了"#btn"这个对象
    $(".tr").each(function(){
          this;//在这里this代表的是每个遍历到的".tr"对象
          that;//仍代表"#btn"对象
    })
})

vue.js的this作用域问题

下面是一段让页面显示动态时间的代码:

<div id="app">
        <h3 style="text-align:end;">当前时间:{{DataNow}}</h3>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                DataNow: new Date(),
            },
            mounted: function () {
                var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
                this.timer = setInterval(function () {
                    _this.DataNow = new Date(); //修改数据date
                }, 1000);
            },
            beforeDestroy: function () {
                if (this.timer) {
                    clearInterval(this.timer); //在Vue实例销毁前,清除我们的定时器
                }
            }
        })
    </script>

var _this = this;这里声明一个变量指向父函数的this, 用于 _this.DataNow = new Date();  修改父函数的“DataNow”实现动态时间,如果这里改为this.DataNow = new Date() 就指向了mounted里面的DataNow 则没有了效果;

_this只是一个变量名,this代表父函数,如果在子函数还用this,this的指向就变成子函数了,_this就是用来存储指向的。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现各种文件文档下载及导出示例

    vue实现各种文件文档下载及导出示例

    这篇文章主要介绍了vue实现各种文件文档下载及导出示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 在vue项目中引入高德地图及其UI组件的方法

    在vue项目中引入高德地图及其UI组件的方法

    今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue组件如何自动按需引入详析

    Vue组件如何自动按需引入详析

    刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue的轮播图组件实现方法

    Vue的轮播图组件实现方法

    下面小编就为大家分享一篇Vue的轮播图组件实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vuex操作state对象的实例代码

    vuex操作state对象的实例代码

    这篇文章主要介绍了vuex操作state对象的实例代码,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • 前端vue3使用axios调用后端接口的实现方法

    前端vue3使用axios调用后端接口的实现方法

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,下面这篇文章主要给大家介绍了关于前端vue3使用axios调用后端接口的实现方法,需要的朋友可以参考下
    2022-12-12
  • vue实现下载文件流完整前后端代码

    vue实现下载文件流完整前后端代码

    这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue实现吸壁悬浮球

    vue实现吸壁悬浮球

    这篇文章主要为大家详细介绍了vue实现吸壁悬浮球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 关于vue-router的那些事儿

    关于vue-router的那些事儿

    要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue-cli 3.0 引入mint-ui报错问题及解决

    vue-cli 3.0 引入mint-ui报错问题及解决

    这篇文章主要介绍了vue-cli 3.0 引入mint-ui报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论