修改vue this指向问题

最新推荐文章于 2024-05-30 14:27:51 发布
最新推荐文章于 2024-05-30 14:27:51 发布
阅读量867 收藏 2
点赞数
文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YBQyyds/article/details/126096982
版权

本文是针对修改vue的this问题

想吃快餐车的看这里偶

后面有详细解释

 

本人在开发过程中遇到了给echarts图表自定义颜色，但是自定义颜色在echarts中画布方法中，如果想要通过this.-prps.子向父组件传值如下

这样只能是报错，因为此时的this指向不是vue

如果我们想获取需要修改一点点，就是转变一下this指向看来获取到

修改如下

 

 

 

杨秉祺
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
this 指向以及修改this 指向的方法
王小涵的笔记的博客
09-28 744
【this指向的学习，以及修改this指向的方法】
详解vue中的computed的this指向问题
10-17
主要介绍了详解vue中的computed的this指向问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 事件改变this指向
duzhe17629085113的博客
12-08 1752
.事件中的this与数据操作 1. 方法中的this代表vm对象 a.方法和ES5的函数中的this是vm对象 b.ES6的箭头函数中的this就不是vm==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法 2. 操作数据: this.xx="新值" //这里的修改会执行两步操作: //a.修改内存data容器中的数据 //b.刷新UI==>重新设置innerHTML fn4中的this指的是vm也是new vue这个对象 ...
改变this指向的三种方法
weixin_63763239的博客
03-10 307
<script> function Parent(money, house) { this.money = money this.house = house } // let obj = {} function Son() { this.type = '孩子' // call的第一个参数是要修改的this指向的对象 后面是给调用call方法的函数传递的参数 参数以散落的形式传递 // Parent.c..
vue中this的指向问题
qq_43654065的博客
11-20 654
问题描述： 在vue中的created、computed等中定义的方法（如A:function）中this指向这个Vue实例，但如果在A方法中又定义了一个B方法，此时B方法中的this不再指向这个Vue实例，而是指向window对象。 解决方法： 此时就需要在A方法里定义var _this = this，用来改变this的指向，然后在B方法里使用_this调用Vue实例 ...
vue 中的this问题
songjuntao8的专栏
04-19 1053
在vue中当在vue中使用匿名函数的时候，会出现this指针改变的问题，出现方法或者属性数据undefine的问题，以下是相关的解决方法 一、在回调函数之前重新将this赋值 例如 connection() { // 更换that指针 var that = this const socket = new SockJS('http://localhost:8080/test-info') this.stompClient = Stomp.over(so
vue echarts内部this指向问题
weixin_45915769的博客
04-07 314
报错Uncaught TypeError: Cannot read property 'getAttribute' of null 发现console.log('dom',document.getElementById('ChartDom'))打印结果是null，console.log(this)发现这里的this指向的不是vue实例，虽然打印this.reasonSortDialog结果确实是true，但是没有显示
Vue中关于this指向的重要原则
zxdznyy的博客
12-29 3369
1.所被Vue管理的函数，最好写成普通函数。这样的this指向实例对象；2.所有不被Vue所管理的函数（定时器，ajax，回调）最好写成箭头函数，这样this依旧指向Vue或者组件的实例对象。
vue使用axios时关于this的指向问题详解
11-27
本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。 1.解决办法 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决...
详解Vue This$Store总结
10-17
主要介绍了详解Vue This$Store总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 329
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 216
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 393
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
基于Java+SpringBoot+Mybaties-plus+Vue+elememt + uniapp 新闻资讯 的设计与实现
qq_28917403的博客
05-27 709
本系统分为 后端 和 小程序端后端：点击登录按钮设置个人中心、管理员账号数据维护、基础数据维护、论坛维护(增删改查帖子信息，包括查看论坛的内容回复)、公告信息维护、用户信息维护、小程序的轮播图维护小程序端：登录、注册、忘记密码首页(查看新闻展示、短视频信息展示、公告信息展示)短视频信息(根据类型检索)、公告信息(根据类型检索)、论坛信息(根据名称检索)、
vue iframe src规则
最新发布
Ann_52547的博客
05-30 189
需要注意的是，为了安全起见，应尽量避免使用 JavaScript URL，尤其是在加载外部内容时，以防止恶意脚本的注入和执行。1、相对路径：相对于当前页面的路径。
arco disign 封装日期范围组件
weixin_43865196的博客
05-29 356
NumRange组件只对值进行双向绑定, option:参数可参考官网a-input-number的属性,父组件赋值默认值为空数组, 或带值的数组。可再此基础上对外扩展事件,方法,参数.
vue 实现鼠标指向时 增加class
09-10
### 回答1： 在 Vue 中，可以使用 v-bind 指令来动态地绑定一个 class。 给定以下 HTML 代码： ``` <template> <div v-bind:class="{ active: isActive }"></div> </template> <script> export default { data() { return { isActive: false } } } </script> ``` 在这里，v-bind:class 绑定了一个包含 isActive 属性的对象。当 isActive 为 true 时，div 的 class 中就会有一个 active 类。 可以在 methods 中定义一个方法来改变 isActive 的值，然后在 HTML 代码中使用 @mouseover 事件来调用这个方法： ``` <template> <div @mouseover="addActiveClass" v-bind:class="{ active: isActive }"></div> </template> <script> export default { data() { return { isActive: false } }, methods: { addActiveClass() { this.isActive = true } } } </script> ``` 这样，当鼠标指向 div 时，isActive 就会变成 true，div 的 class 中就会增加 active 类。 ### 回答2： 在Vue中实现鼠标指向时增加class的效果，可以通过使用Vue的事件绑定和计算属性来实现。 首先，在需要添加class的元素上绑定鼠标移入和移出的事件。可以使用v-on指令（简写@）来实现事件绑定，例如: ``` <div @mouseover="addClass" @mouseout="removeClass" :class="{ 'highlight': isHover }"></div> ``` 在data中添加一个isHover变量，用来记录鼠标是否悬停在元素上： ``` data() { return { isHover: false } } ``` 然后定义对应的方法addClass和removeClass，用于改变isHover的值： ``` methods: { addClass() { this.isHover = true }, removeClass() { this.isHover = false } } ``` 最后，在样式中定义highlight类，样式根据isHover的值来控制是否显示： ``` <style> .highlight { background-color: blue; } </style> ``` 这样，当鼠标移入元素时，isHover变为true，从而添加highlight类，实现指定效果；当鼠标移出元素时，isHover变为false，从而移除highlight类。 以上就是使用Vue实现鼠标指向时增加class的方法。 ### 回答3： Vue 实现鼠标指向时增加 class 的方法有以下几种： 1. 使用 v-bind 绑定 class： 在模板中使用 v-bind:class 指令，绑定一个计算属性，并设置计算属性的返回值根据鼠标事件的触发来添加或移除 class。 例如，在模板中添加以下代码： ``` <div v-bind:class="{'hover-class': isHover}"> </div> ``` 然后在 Vue 实例中定义一个计算属性： ``` data() { return { isHover: false }; }, ``` 最后使用鼠标事件监听器来修改计算属性的值： ``` methods: { handleMouseOver() { this.isHover = true; }, handleMouseOut() { this.isHover = false; } } ``` 2. 使用 v-on 绑定事件： 在模板中使用 v-on 指令，绑定鼠标事件，并在事件处理方法中使用 `$event.target` 获取当前触发事件的元素，并通过 `classList` 属性来添加或移除 class。 例如，在模板中添加以下代码： ``` <div v-on:mouseover="addHoverClass" v-on:mouseout="removeHoverClass"> </div> ``` 然后在 Vue 实例中定义事件处理方法： ``` methods: { addHoverClass(event) { event.target.classList.add('hover-class'); }, removeHoverClass(event) { event.target.classList.remove('hover-class'); } } ``` 3. 使用 Vue 的指令： Vue 提供了一些内置的指令，如 v-on 和 v-bind，同时也可以自定义指令来实现鼠标指向时增加 class 的效果。 例如，我们可以定义一个名为 v-hover-class 的指令，在指令的 bind 和 unbind 钩子函数中分别添加和移除 class。 ``` Vue.directive('hover-class', { bind(el) { el.addEventListener('mouseover', function() { el.classList.add('hover-class'); }); el.addEventListener('mouseout', function() { el.classList.remove('hover-class'); }); }, unbind(el) { el.removeEventListener('mouseover'); el.removeEventListener('mouseout'); } }); ``` 然后在模板中使用这个指令： ``` <div v-hover-class> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值