這篇文章主要介紹vue對(duì)storejs獲取數(shù)據(jù)進(jìn)行處理時(shí)遇到的問(wèn)題有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括?？诰W(wǎng)站建設(shè)、?？诰W(wǎng)站制作、?？诰W(wǎng)頁(yè)制作以及?？诰W(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，?？诰W(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到海口省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

具體代碼如下所示：

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判斷購(gòu)物車中是否有存在內(nèi)容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //對(duì)數(shù)據(jù)處理 將商店中名中的地址分離出來(lái)
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}

這個(gè)時(shí)候打印出來(lái)：

this.shopList 顯示的結(jié)果為 {ob: Observer}

雖然可以在vue中直接使用如下：

  
    {{list}}
  

但是如果此時(shí)我想對(duì)this.shopList中的數(shù)據(jù)進(jìn)行處理，就會(huì)出現(xiàn)問(wèn)題，此時(shí)如果你想遍歷循環(huán)該數(shù)據(jù)，就會(huì)出現(xiàn)意想不到的效果，因?yàn)榇藭r(shí)打印 this.shopList.length 顯示出來(lái)的結(jié)果為undefined。

遍歷對(duì)象有幾種方法：

1，最常用的 for循環(huán) ，但此時(shí)length為undefined，該方法不可用；

2，for in 同上原因不可使用

3. jquery中也有遍歷對(duì)象的方法 $.each(this.shopList,function(n,i){})

你會(huì)發(fā)先第三種可以遍歷這個(gè)數(shù)據(jù)，那么就可以實(shí)現(xiàn)數(shù)據(jù)的處理了。

但是如果你的this.shopList這個(gè)對(duì)象中又包含了一層對(duì)象呢？.each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問(wèn)題了嗎？除了這種方法外，有種更好的辦法：

created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //對(duì)數(shù)據(jù)處理 將商店中名中的地址分離出來(lái)
      var shopList = store.get('shopCar')
      $.each(shopList,function(n,i){
        //處理數(shù)據(jù)。。。。。
      })
      this.shopList = shopList;
      console.log(this.shopList)
    }
  }

更簡(jiǎn)單直接的辦法是，將數(shù)據(jù)先賦值給一個(gè)變量，將數(shù)據(jù)處理為你想要的格式之后，再?gòu)?fù)制給this.shopList即可。

為什么我們直接將數(shù)據(jù)賦值給this.shopList就不可以對(duì)數(shù)據(jù)進(jìn)行處理了呢？

原因是當(dāng)你將數(shù)據(jù)賦值給this.shopList，即實(shí)現(xiàn)了vue的數(shù)據(jù)的雙向綁定。

以上是“vue對(duì)storejs獲取數(shù)據(jù)進(jìn)行處理時(shí)遇到的問(wèn)題有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！