vue中l(wèi)et that=this的作用及說明
更新時(shí)間：2022年10月18日 14:50:31 作者：晚風(fēng)914
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue let that=this的作用
this 會隨著上下文環(huán)境而變換它的指向，在當(dāng)前作用域中設(shè)置一個(gè)變量用來存儲 this 可以防止在其他地方找不到 this 的錯誤。
```javascript
$("#btn").click(function(){
var that = this;//這里this和that都代表了"#btn"這個(gè)對象
$(".tr").each(function(){
this;//在這里this代表的是每個(gè)遍歷到的".tr"對象
that;//仍代表"#btn"對象
})
})vue.js的this作用域問題
下面是一段讓頁面顯示動態(tài)時(shí)間的代碼：
<div id="app">
? ? ? ? <h3 style="text-align:end;">當(dāng)前時(shí)間：{{DataNow}}</h3>
? ? </div>
? ? <script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? DataNow: new Date(),
? ? ? ? ? ? },
? ? ? ? ? ? mounted: function () {
? ? ? ? ? ? ? ? var _this = this; //聲明一個(gè)變量指向Vue實(shí)例this，保證作用域一致
? ? ? ? ? ? ? ? this.timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? _this.DataNow = new Date(); //修改數(shù)據(jù)date
? ? ? ? ? ? ? ? }, 1000);
? ? ? ? ? ? },
? ? ? ? ? ? beforeDestroy: function () {
? ? ? ? ? ? ? ? if (this.timer) {
? ? ? ? ? ? ? ? ? ? clearInterval(this.timer); //在Vue實(shí)例銷毀前，清除我們的定時(shí)器
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>var _this = this;這里聲明一個(gè)變量指向父函數(shù)的this, 用于 _this.DataNow = new Date(); 修改父函數(shù)的“DataNow”實(shí)現(xiàn)動態(tài)時(shí)間，如果這里改為this.DataNow = new Date() 就指向了mounted里面的DataNow 則沒有了效果；
_this只是一個(gè)變量名，this代表父函數(shù)，如果在子函數(shù)還用this，this的指向就變成子函數(shù)了，_this就是用來存儲指向的。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點(diǎn)，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下2019-06-06
最近接到一個(gè)需求,公司需要對vue項(xiàng)目實(shí)現(xiàn)線上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)，Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)2018-11-11
這篇文章主要介紹了Element-UI 使用el-row 分欄布局的教程，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Vue實(shí)現(xiàn)導(dǎo)航吸頂效果的教程詳解
在瀏覽器上下滾動的時(shí)候,如何距離頂部的距離大于78px,吸頂顯示,小于78px則隱藏,所以本文小編給大家介紹了Vue設(shè)置導(dǎo)航吸頂?shù)脑敿?xì)教程,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
vue3.0語法糖內(nèi)的defineProps及defineEmits解析
這篇文章主要介紹了vue3.0語法糖內(nèi)的defineProps及defineEmits解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是?vue3?新的狀態(tài)管理工具，簡單來說相當(dāng)于之前?vuex，它去掉了?Mutations?但是也是支持?vue2?的，需要的朋友可以參考下2022-08-08