网站快速建站,搜索引擎优化自然排名,设计师网站pin,软件界面设计欣赏#x1f609;博主#xff1a;初映CY的前说(前端领域) ,#x1f4d2;本文核心#xff1a;uniapp中this指向问题 前言#xff1a;this大家知道是我们当前项目的实例#xff0c;我们可以在这个this上面拿到我们原型上的全部数据。这个常用在我们在方法中调用其他方法使用。 … 博主初映CY的前说(前端领域) ,本文核心uniapp中this指向问题 前言this大家知道是我们当前项目的实例我们可以在这个this上面拿到我们原型上的全部数据。这个常用在我们在方法中调用其他方法使用。 ⭐一、uniapp中this指向 简而言之记住一句话箭头函数可以修改this指向 下面来看这个例子我是用uni官网的api举个例子uni.getSystemInfo javascript
templateview classcontentimage classlogo src/static/logo.png/imageview classtext-areatext classtitle{{title}}/text/view/view
/templatescriptexport default {data() {return {title: Hello}},onLoad() {this.getInfo()},methods: {getInfo(){uni.getSystemInfo({fail: function (res) {console.log(res,this)}, success: (res) {console.log(this,this);}});}}}
/scriptstyle.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
/style
注意点我调用方法中成功success使用的是箭头函数此刻我们可以看到我们的this是什么 展开就是我们当前实例 那我们用传统的非箭头试试看 代码修改如下 日志输出查看我们的this找不到了 总结使用uniapp中api的时候一定是需要使用箭头函数的呦同理这是使用vue语法中时刻需要注意的。 至此本文结束愿你有所收获 期待大家的关注与支持! 你的肯定是我更新的最大动力
