快捷導(dǎo)航

vue將對象新增的屬性添加到檢測序列的方法

更新時(shí)間：2018年02月24日 14:41:35 作者：twmay006

下面小編就為大家分享一篇vue將對象新增的屬性添加到檢測序列的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue中將對象中新增的屬性增加到檢測序列中

deepCopy(o1, o2) { // 將o2的內(nèi)容拷貝給data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

由于 Vue 不允許動(dòng)態(tài)添加根級響應(yīng)式屬性，所以你必須在初始化實(shí)例前聲明根級響應(yīng)式屬性，哪怕只是一個(gè)空值

如果一個(gè)屬性沒有事先聲明，后面再增加，他不能檢測到變化，對于一些固定的結(jié)構(gòu)，是可以檢測到變化的。比如我知道一個(gè)obj里面必然有key1、key2屬性，我可以事先初始化。如果這些東西是動(dòng)態(tài)的，我沒法事先聲明。后面再增加，vue沒法檢測到變化了。

這時(shí)將你已經(jīng)在data中聲明的變量和你要賦給這個(gè)變量的值作為參數(shù)傳進(jìn)該函數(shù)就行了

以上這篇vue將對象新增的屬性添加到檢測序列的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時(shí)遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue el-upload上傳文件的示例代碼
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
高頻率Vue面試題匯總以及答案
vue是組件化開發(fā)框架,所以對于vue應(yīng)用來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于高頻率Vue面試題以及答案的相關(guān)資料,需要的朋友可以參考下
2023-02-02
使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
在日常的前端開發(fā)中,文件上傳是一個(gè)非常常見的需求,尤其是在用戶需要一次性上傳多個(gè)文件的場景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫,為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件,需要的朋友可以參考下
2024-08-08
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時(shí)間是一項(xiàng)常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時(shí)間,需要的朋友可以參考下
2024-01-01
關(guān)于el-scrollbar滾動(dòng)條初始化不顯示的問題及解決
這篇文章主要介紹了關(guān)于el-scrollbar滾動(dòng)條初始化不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用vue構(gòu)建多頁面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁面應(yīng)用的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
Vue中常見的幾種傳參方式小結(jié)
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
Vue下載不同文件的幾種方式總結(jié)
在Vue項(xiàng)目中實(shí)現(xiàn)文件下載有多種方式,包括使用window.open、<a>標(biāo)簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標(biāo)簽等,每種方法都有其適用場景,開發(fā)者可以根據(jù)項(xiàng)目需求選擇最合適的方式
2025-01-01
Vue中用watch一次監(jiān)聽多個(gè)值變化的示例詳解
在Vue中,watch 本身不能監(jiān)聽多個(gè)變量,但我們可以通過返回具有計(jì)算屬性的對象然后監(jiān)聽該對象,從而實(shí)現(xiàn)一次性“監(jiān)聽多個(gè)變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個(gè)值變化的示例,需要的朋友可以參考下
2024-01-01