【问题描述】

返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效

        mounted() {
window.onscroll=function(){
if(document.documentElement.scrollTop>) {
this.isActive=true;
}else{
this.isActive=false;
}
}
}

此时发现无效???

检查后发现this指向window,而非vue实例,所以无法操作数据。

【解决方案】

/*  问题:在内部直接操作this失效? */
/* 解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
        mounted() {
/* 问题:在内部直接操作this失效? */
/* 解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
var vm=this;
window.onscroll=function(){
if(document.documentElement.scrollTop>) {
vm.isActive=true;
}else{
vm.isActive=false;
}
}
}

.

vue组件之this指向问题的更多相关文章

  1. vue 组件中this指向

    今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  4. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  5. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  6. 手把手教你封装 Vue 组件并使用 NPM 发布

    Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...

  7. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  8. 浅谈 vue实例 和 vue组件

    vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...

  9. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

随机推荐

  1. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  2. 【TJOI 2014】 上升子序列

    [题目链接] 点击打开链接 [算法] 先考虑50分的做法 : f[i]表示以i结尾的本质不同的上升子序列的个数 则f[i] = sigma(f[j]) (j < i,a[j] < a[i] ...

  3. NPU 2015年陕西省程序设计竞赛网络预赛(正式赛)F题 和谐的比赛(递推 ||卡特兰数(转化成01字符串))

    Description 今天西工大举办了一场比赛总共有m+n人,但是有m人比较懒没带电脑,另外的n个人带了电脑.不幸的是,今天机房的电脑全坏了只能用带的电脑,一台电脑最多两人公用,确保n>=m. ...

  4. lua 与 c 的相互调用

    Lua是一个嵌入式的语言,意味着Lua不仅可以是一个独立运行的程序包也可以是一个用来嵌入其他应用的程序库. Lua可以作为程序库用来扩展应用的功能,也就是Lua可以作为扩展性语言的原因所在.同时,Lu ...

  5. 使用VS进行打包程序解决生成两个文件的问题(压缩后只有一个exe)

    使用VS打包创建setup相信大家都挺熟的了,不熟的话网上也有很多,就不做介绍了,现在给大家写下怎么将生成的那些文件夹以及setup.exe和.msi 文件打包成一个exe 我们这里使用的是Winra ...

  6. 版本控制系统Git

    常用的版本控制系统有VSS.SVN.CVS等等,Git是最近几年使用得比较多的分布式版本控制系统,存在即合理,Git的出现总有它出现的理由,以前的版本控制系统肯定有一些不足的地方,所以才出现了Git. ...

  7. [App Store Connect帮助]八、维护您的 App(2)将 App 从 App Store 中移除

    如果您不想继续向顾客提供您的 App,您可以将其从 App Store 中移除,这样会移除该 App 的所有版本.拥有该 App 先前版本的用户将无法更新 App,但只要您的合约有效,用户便仍可下载最 ...

  8. 【OpenJ_Bailian - 4001】 Catch That Cow(bfs+优先队列)

    Catch That Cow Descriptions: Farmer John has been informed of the location of a fugitive cow and wan ...

  9. 比特币搬砖对冲策略Python源码

    策略复制地址:https://www.fmz.com/strategy/21023 策略原理 比特币搬砖策略是入门程序化交易的基础策略.原理简单,是新手尝试程序化的好选择,在其黄金时期,比特币搬砖也带 ...

  10. 字符串处理/贪心 Codeforces Round #307 (Div. 2) B. ZgukistringZ

    题目传送门 /* 题意:任意排列第一个字符串,使得有最多的不覆盖a/b字符串出现 字符串处理/贪心:暴力找到最大能不覆盖的a字符串,然后在b字符串中动态得出最优解 恶心死我了,我最初想输出最多的a,再 ...