【问题描述】

返回顶部组件里,用到数据操作。通过方法里改动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. Struts2中怎样配置struts。xml?

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/ ...

  2. 超线程技术——超线程技术让(P4)处理器增加5%的裸晶面积,就可以换来15%~30%的效能提升,本质单核模拟双核!和异步编程的思想无异。

    超线程是Intel 所研发的一种技术,于2002年发布.超线程的英文是HT技术,全名为Hyper-Threading,中文又名超线程.超线程技术原先只应用于Intel Xeon处理器中,当时称为Sup ...

  3. 并不对劲的manacher算法

    有些时候,后缀自动机并不能解决某些问题,或者解决很麻烦.这时就有各种神奇的字符串算法了. manacher算法用来O(|S|)地求出字符串S的最长的回文子串的长度.这是怎么做到的呢? 并不对劲的暴力选 ...

  4. [NOI 2012] 美食节

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2879 [算法] 首先 , 将每种食物建一个点 , 将每位厨师做的每一道菜建一个点 建 ...

  5. Windows JDK 1.8降级为1.7方法

    转自:https://www.aliyun.com/jiaocheng/890626.html 正常情况下,JDK的升降级只需更改环境变量即可 可是到了1.8版本,Oracle使了一点小手段, 在系统 ...

  6. 洛谷 P2764 最小路径覆盖问题【匈牙利算法】

    经典二分图匹配问题.把每个点拆成两个,对于原图中的每一条边(i,j)连接(i,j+n),最小路径覆盖就是点数n-二分图最大匹配.方案直接顺着匹配dsf.. #include<iostream&g ...

  7. spoj 839 OPTM - Optimal Marks&&bzoj 2400【最小割】

    因为是异或运算,所以考虑对每一位操作.对于所有已知mark的点,mark的当前位为1则连接(s,i,inf),否则连(i,t,inf),然后其他的边按照原图连(u,v,1),(v,u,1),跑最大流求 ...

  8. jenkins一次构建两次触发job问题

    具体内容详见: https://issues.jenkins-ci.org/browse/JENKINS-21464?focusedCommentId=250183&page=com.atla ...

  9. Python之Linux下的virtualenv&&virtualenvwrapper

    virtualenv 可以在系统中建立多个不同并且相互不干扰的虚拟环境. #指定清华源下载pip的包 pip3 install -i https://pypi.tuna.tsinghua.edu.cn ...

  10. Hdu 3605 Escape (最大流 + 缩点)

    题目链接: Hdu 3605  Escape 题目描述: 有n个人要迁移到m个星球,每个星球有最大容量,每个人有喜欢的星球,问是否所有的人都能迁移成功? 解题思路: 正常情况下建图,不会爆内存,但是T ...