【问题描述】

返回顶部组件里,用到数据操作。通过方法里改动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. codeforces 688C C. NP-Hard Problem(bfs判断奇数长度环)

    题目链接: C. NP-Hard Problem time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  2. C#即时通讯系统设计与实现(一)

    最近学习了一下即时通讯,写了几天了,现在把遇到的问题和得到的心得在这里分享下. 即时通讯,C/S模式,在服务器上架设服务端,服务端是服务形式的,可以设置为开机自启动,客户端进行访问,可以安装在任意一台 ...

  3. Xenocode Postbuild 2010 for .NET 使用

    代码混淆工具 参考地址1:http://blog.csdn.net/yanpingsoft/article/details/7997212 参考地址2:http://www.cnblogs.com/w ...

  4. 51nod 1220 约数之和【莫比乌斯反演+杜教筛】

    首先由这样一个式子:\( d(ij)=\sum_{p|i}\sum_{q|j}[gcd(p,q)==1]\frac{pj}{q} \)大概感性证明一下吧我不会证 然后开始推: \[ \sum_{i=1 ...

  5. 通过爬虫爬取四川省公共资源交易平台上最近的招标信息 --- URLConnection

    通过爬虫爬取公共资源交易平台(四川省)最近的招标信息 一:引入JSON的相关的依赖 <dependency>       <groupId>net.sf.json-lib< ...

  6. 《windows核心编程系列》二十二谈谈修改导入段拦截API。

    一个模块的导入段包含一组DLL.为了让模块能够运行,这些DLL是必须的.导入段还包含一个符号表.它列出了该模块从各DLL中导入的符号.当模块调用这些导入符号的时候,系统实际上会调用转换函数,获得导入函 ...

  7. 计算机视觉-SIFT特征匹配进行目标转换

    Lowe将SIFT算法分解为如下四步: 1. 尺度空间极值检测:搜索所有尺度上的图像位置.通过高斯微分函数来识别潜在的对于尺度和旋转不变的兴趣点. 关键点定位:在每个候选的位置上,通过一个拟合精细的模 ...

  8. 洛谷 P3808 【模板】AC自动机(简单版)洛谷 P3796 【模板】AC自动机(加强版)

    https://www.cnblogs.com/gtarcoder/p/4820560.html 每个节点的后缀指针fail指针指向: 例如he,she,his,hers的例子(见蓝书P214): 7 ...

  9. 暴力 ZOJ 1403 Safecracker

    题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...

  10. Liferay门户部署至Apusic Application Server域

    Liferay默认情况下部署在Tomcat容器中,因项目原因需要将Liferay部署至金蝶Apusic Application Server应用服务器中,部署过程如下,特此记录. 1.liferay- ...