vue开发中在页面代码中一律不能使用this

最新推荐文章于 2024-02-28 13:53:12 发布
原创 最新推荐文章于 2024-02-28 13:53:12 发布 · 4.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种常见的Vue.js开发中的错误：直接在DOM元素上使用@click事件绑定时，尝试改变当前作用域内的属性值。文章给出了正确的实现方式，并解释了为何原始的方法存在缺陷。 
<div @click='this.limitNum=this.address.length'></div>

以上代码是错误的，因为当前代码的作用域就已经是this了
正确写法

<div @click='limitNum=address.length'></div>
this在vue和小程序中的使用详解
10-17
在Vue和微信小程序等前端开发框架中，`this`关键字的使用非常重要，它代表了当前函数运行时所依赖的上下文环境。理解`this`在不同场景下的行为对于编写正确的JavaScript代码至关重要。在本篇详解中，将深入探讨`this...
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
Vue3的setup函数中为什么没有this
weixin_47450807的博客
02-11 9642
我们在vue2中使用options api时，可以使用this,但是当我们使用vue3中的composition api时，我们在setup中却无法使用this。 原因是：我们在options api中对其中的一些属性进行绑定，但是在composition api中的setup函数的执行并没有绑定实例对象，下面我们看一下源码。 上面截图为options api中的methods选项和生命周期函数的部分源码，我们可以看到当执行函数时，会使用bind进行绑定。 下面我们将从composition api的se
vue模板使用this问题
qq_45739262的博客
02-01 3935
在Vue模板中，this是隐式的（这就是为什么console.log不能从模板中工作的原因），所以您可以跳过它 <input :value="$store.state.shareUrl"/>
想在Vue的js中省略this方案
a1071626267的博客
10-15 901
想在Vue的js中省略this方案
vue2 - 配置项里面this的使用问题
m0_74417967的博客
06-30 1398
data里面的值不能是data里面定义的值，不能用this.list去给data里面另外一个属性绑定值。典型案例：this为undefine。
vue2的this指向问题
weixin_37548429的博客
02-12 885
上下文已经改变，不再指向 Vue 实例。要解决这个问题，您需要在回调函数外部保持对 Vue 实例的引用，然后在回调函数内部使用这个引用。console.error('下载文件时发生错误:', error);console.error('下载文件时网络错误');始终指向 Vue 实例，因此能够正确地调用。下面是修改后的代码，其中添加了一个。就引用了 Vue 实例。错误，这是因为回调函数中的。这样，不论回调函数如何改变。方法的开始处被赋值为。回调函数中，我们使用。在这个修改后的代码中，
vue中使用codemirror的实例详解
10-17
首先，为了在Vue项目中使用Vue-Codemirror，你需要通过npm安装这个库： ```bash npm install vue-codemirror --save ``` 接下来，在`main.js`文件中导入Vue-Codemirror以及其样式文件： ```javascript import { ...
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
在某些情况下，开发者可能需要在Vue项目中使用已经开发好的JSP页面，以此来节约开发时间和成本。这可以通过以下两种方法实现： 1. 使用v-html指令进行JSP渲染 通过v-html指令，可以直接将从服务器端返回的JSP页面...
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
在开发Vue应用时，我们可能会遇到使用第三方滚动库如Vue-scroller时，遇到的一个常见问题：在页面中包含`<input>`输入框时，用户在输入框区域内无法触发滚动操作。这个问题主要是由于Vue-scroller组件内部的源码逻辑...
vue中this失效问题
qq_44716001的博客
05-31 1485
点击confirm按钮后，执行function方法中，如果在方法内容要使用data中定义的一个变量，使用this.ids时，发现此时的this是undefined，无法直接进行引用，原因是因为。箭头函数出现在es6，箭头函数里面没有this对象，此时的this对象指的是是外层的 this 对象，所以入如果在函数中要引用外面的this对象，推荐使用箭头函数。this.$modal.confirm('是否确认删除编号为"' + _that.ids + '"的数据项？
Vue2.x实现this调用组件
liluo101的博客
03-04 879
长期以来，我都是通过父组件引入子组件的方式调用，比如一个Modal，一个Notice之类的，而很多UI框架都可以支持this.$xxx的方法调用展示，很羡慕，很自责，为啥我还在用这么low的方式？而且多个组件引入到父组件会造成层级过深，不利于渲染，而这种方式不仅优雅，而且可以直接将组件挂载到body里面，岂不是美滋滋 实现方法 1.一个Vue文件 <template> <div> this is count {{count}} th
【vue2】vue2在js文件中使用this(this指向vue实例)的解决方法
最新发布
bbt953的博客
02-28 1537
vue2在js文件中使用this(this指向vue实例)的解决方法
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
qq_45634989的博客
08-18 7070
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
vue2项目中在回调函数中 this 可能指向不同对象
weixin_53452611的博客
01-19 507
请求是成功 , 但是提示却报错info为 undefined , 一开始很诧异为啥会报这个错误 , 以为message没有引用 , 后面一步步找网上的资料 , 打印this ,的目的是保存当前上下文;异步操作中能够访问当前上下文中的属性和方法。在提交请求前定义把this保存为that , 下文将this修改为that即可。被用来访问外部上下文的属性和方法，而不受异步操作中。发现this指向变成了图片 所以报错。
整理 Vue2 项目中各种报错&警告-信息
Mr.小灰狼_随笔
09-06 1万+
Vue 报错&警告-信息 _ 整理版 自己平常 Vue 项目 中出现的一些Bug 和 警告⚠️ , 日常记录一下 : 目录 ( 1 )[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404" ( 2 )[Vue warn]: Error in v-on handler: "TypeError: this.todos.push is not a function
vue 中的this引发的代码小慌乱
蓬莱的博客
04-17 562
vue中犯的小错误 在方法中打印输出data中的user时,没有加this引用 axios发送请求的时候,括号中传了url但是忘记传参数了,记住传参的时候也要用this引用 小结: 如果是script根标签下面定义了let或者const变量/常量,则可以直接使用,但是如果使用vue对象里面定义的变量或常量,则是需要加this引用 ...
如何解决在vue中this报错undefined
热门推荐
SiriusSun_的博客
05-22 2万+
本文转载于：http://www.fly63.com/article/detial/5834（若有侵权，请作者联系本人删除） 当你开心地在编程，惊叹于vue的神奇，这时你却遇到这样的情况： 你的vue应用无法正常工作，你收到的报错是：this is undefined 产生问题的原因是你混合使用了普通函数和箭头函数。我猜你肯定用了一个箭头函数。如果你把这个箭头函数替换成普通函数，也许能解决上面你遇到的问题。 接下来让我们深入原理来了解为什么会产生这个问题。 毕竟，知识是强大的，如果你知道了问题的原因，你将能
Vue宝典之this.$refs属性
Kuangtian的博客
12-13 2680
在 Vue.js 中，refs 属性是用来引用组件或 DOM 元素的。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些元素或组件。在 Vue.js 中，refs 属性是一个非常有用的特性，它允许我们在组件中访问 DOM 元素和子组件实例。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些引用。使用 refs 可以实现诸如操作 DOM 元素、调用子组件方法等功能。
Vue中使用EChart实现雷达图的代码教程
- 在Vue组件中使用ECharts实现雷达图，首先需要在`<template>`标签内提供一个`<div>`容器，然后在`<script>`标签内引入ECharts，使用`Vue.prototype.$echarts`注册ECharts实例。 - 在Vue组件的`mounted`钩子函数中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值