vue组件之this指向问题
【问题描述】
返回顶部组件里,用到数据操作。通过方法里改动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指向问题的更多相关文章
- vue 组件中this指向
今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- 浅谈 vue实例 和 vue组件
vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- mac idea 内存
vim /Applications/IntelliJ\ IDEA.app/Contents/bin/idea.vmoptions -Xms512m -Xmx2048m -XX:ReservedCode ...
- C# ListView 列宽调整 刷新
/*********************************************************************** * C# ListView 列宽调整 刷新 * 说明: ...
- Watir: element_by_xpath 的使用
b =Watir::IE.new b.goto'http://www.google.com/' txt =b.element_by_xpath("//*[@name='q']") ...
- python编写猜拳代码
一.项目要求: 电脑随机出拳和用户猜拳三次.胜利条件如下: (1)(石头 胜 剪刀) (2)(剪刀 胜 布) (3)(布 胜 石头) 二.代码 #!/usr/bin/env python # -*- ...
- 腾讯API
相关文档: API列表 腾讯开放平台联调工具集 公共返回码说明 SDK下载
- 【插件开发】—— 12 GEF入门
介绍 前面也简单的介绍了一下插件开发的相关知识,下面主要就介绍一下GEF的相关使用.由于最近使用到编辑器这部分的操作,因此就跳过其他的内容,先介绍下GEF的相关知识. 前文回顾 1 插件学习篇 2 简 ...
- Ubuntu An error occurred,please run Package Manager..
转自https://blog.csdn.net/idealcitier/article/details/78294137 An error occurred,please run Package Ma ...
- jenkins一次构建两次触发job问题
具体内容详见: https://issues.jenkins-ci.org/browse/JENKINS-21464?focusedCommentId=250183&page=com.atla ...
- SIFT特征点检测与匹配
SIFT的步骤如下: (1) 尺度空间极值检测(Scale-space Extrema Detection) 也就是在多尺度高斯差分(Difference of Gauss)空间中检测极值点(3x3x ...
- Create the first sql server 2016 mobile report;创建 第一个 sqlserver 2016 Mobile report
在微软收购了datazen之后,sqlserver2016 集成了mobilereport,mobile report 基于html5,兼容各类主流浏览器,之前ssrs2008 R2中很多chart类 ...