【问题描述】

返回顶部组件里,用到数据操作。通过方法里改动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. android 改变状态栏(StatusBar)颜色

    public static void changeColor(Activity paramActivity, int paramInt1) { if (Build.VERSION.SDK_INT &g ...

  2. bzoj 1504 郁闷的出纳员

    题目大意: 有一些员工 他们有工资 当他们的工资低于一个值时 他们会永远离开 I命令 I_k 新建一个工资档案,初始工资为k.                 如果某员工的初始工资低于工资下界,他将立 ...

  3. property_get / property_set (转载)

    转自:http://blog.csdn.net/xujianqun/article/details/6363318 每个属性都有一个名称和值,他们都是字符串格式.属性被大量使用在Android系统中, ...

  4. jvm学习理解

    1.本文是转载别人所写的,因为这个jvm看很多遍老是忘,转载只是备忘和查看方便. 转载地址: https://mp.weixin.qq.com/s/reFDCkUdq1QGGDs_Mnuesg 图中涉 ...

  5. jsp请求转发小例子(转载)

    在服务器端对客户端请求时行转发对其它的对象,如果jsp网页或Servlet 用三个 jsp网页来演示转发: forword1.jsp, 用来提交表单, 将表单内容提交给 forwrod2.jsp,  ...

  6. bzoj 4818: [Sdoi2017]序列计数【容斥原理+dp+矩阵乘法】

    被空间卡的好惨啊---- 参考:http://blog.csdn.net/coldef/article/details/70305596 容斥,\( ans=ans_{没有限制}-ans{没有质数} ...

  7. 2017 ACM-ICPC Asia East Final T1

    好弱啊只会T1,在Chemist&&wxh两位dalao的指导下搞懂. 题解如下.[手写版本 滑稽 code #include<bits/stdc++.h> using n ...

  8. 设置mysql 定时备份任务

    1 修改配置文件  /etc/my.conf (为了命令 mysqldump能省略输入密码执行,mysql5.5 之后已经不建议控制台直接输入密码的方式) 增加如下配置 [client]host=lo ...

  9. hdu 4565 So Easy! (共轭构造+矩阵快速幂)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4565 题目大意: 给出a,b,n,m,求出的值, 解题思路: 因为题目中出现了开根号,和向上取整后求 ...

  10. 对数组随机赋值,并输出(Arrays.toString(arr))

    import java.util.Arrays; public class Demo { public static void main(String[] args) { int[] arr = ne ...