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进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- jfreechart应用2--柱状图(作者:百度 被风吹过的日子)
jfreechart应用2--柱状图 二. 柱状图 在WebRoot目录下建立bar目录,用来存放柱状图的各个例子.首先在该目录下建立一个sample1.jsp文件,让我们来看一个简单的柱状图的例 ...
- 【HDU 1561】 The More,The better
[题目链接] 点击打开链接 [算法] 树形背包 注意是一棵森林 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN ...
- WEB开发框架系列教程 (一)快速创建解决方案
执行<华东信息辅助开发工具> 程序 打开程序界面如下图 输入用户名.密码进行登录 如果暂时还没有用户名和密码,点击注册提供机器码给管理员进行注册. 管理员QQ:93346562 下图是:点 ...
- 设计模式之观察者模式(Observer pattern)
最近参加了一次面试,其中笔试题有一道编程题,在更换掉试题的描述场景后,大意如下: 上课铃声响起,学生A/B/C/D进入教室:下课铃声响起,学生A/B/C/D离开教室. 要求使用设计模式的思想完成铃与学 ...
- 清除当前文件夹下.svn文件的方法
把如下命令拷贝到一个文件中,并保存为bat后缀的文件:然后把这个bat文件保存到相应文件夹下. @echo on color 2f mode con: cols=80 lines=25 @REM @e ...
- Ceph之PG数调整
1. PG介绍 PG, Placement Groups.CRUSH先将数据分解成一组对象,然后根据对象名称.复制级别和系统中的PG数等信息执行散列操作,再将结果生成PG ID.可以将PG看做一个逻辑 ...
- X86 Linux 下 SIGBUS 总结
SIGBUS 在 x86 Linux 上并不多见,但一旦出现,其调用堆栈常常让人摸不着头脑,加之信号问题各平台系统间差异较大,更让人难以理清,这里稍微总结一下 x86 Linux 上大概有哪些情形会触 ...
- 暴力/图论 hihoCoder 1179 永恒游戏
题目传送门 /* 暴力:也是暴力过了,无语.无向图,两端点都要加度数和点 */ #include <cstdio> #include <algorithm> #include ...
- 题解报告:poj 2185 Milking Grid(二维kmp)
Description Every morning when they are milked, the Farmer John's cows form a rectangular grid that ...
- Zygote和System进程的启动过程、Android应用进程启动过程
1.基本过程 init脚本的启动Zygote Zygote进程的启动 System进程的启动 Android应用进程启动过程 2.init脚本的启动 +------------+ +-------+ ...