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进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- 性能测试工具curl-loader(linux)
curl-loader介绍 curl-loader(也被称为“omes-NIK”和“davilka”)是一个开源的C语言编写的工具,模拟应用负载和成千上万的几十万人的HTTP / HTTPS和FTP/ ...
- 小程序-demo:小程序示例-page/component
ylbtech-小程序-demo:小程序示例-page/component 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...
- [App Store Connect帮助]八、维护您的 App(4.3)回复顾客评论(iOS、macOS 或 watchOS)
您可以公开回复顾客评论,但在您的 App Store 产品页上每条评论仅会显示一条回复.您可以回复评论.编辑回复,以及删除回复. 在回复和编辑显示在 App Store 上之前(可能需要至多 24 小 ...
- 【OpenJ_Bailian - 2192】Zipper(dfs)
Zipper Descriptions: Given three strings, you are to determine whether the third string can be forme ...
- Logstash读取文本信息并写入到ES
Logstash读取文本信息并写入到ES 前提是ELK安装没问题 进入到logstash安装目录下的bin目录(我的logstash安装目录:/usr/local/) [root@es1 bin]# ...
- Caused by: java.lang.ClassNotFoundException: org.apache.log4j.Logger
myeclipse 新建web项目,报错Caused by: java.lang.ClassNotFoundException: org.apache.log4j.Logger,查看项目中已经有引入了 ...
- OpenCV+VS开发环境配置
最近跑C程序,头文件中用到了OpenCV中的文件,找了很多篇OpenCV+VS的环境配置,发现如下这篇写的最为详细,特转载来自己的博客中留存,并附上原博客地址如下 OpenCV学习笔记(一)——Ope ...
- poj 2506 Tiling 递推
题目链接: http://poj.org/problem?id=2506 题目描述: 有2*1和2*2两种瓷片,问铺成2*n的图形有多少种方法? 解题思路: 利用递推思想,2*n可以由2*(n-1)的 ...
- bzoj258 [USACO 2012 Jan Gold] Bovine Alliance【巧妙】
传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=111 传送门2:http://www.lydsy.com/JudgeOn ...
- 暴力 ZOJ 1403 Safecracker
题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...