首頁 > web前端 > js教程 > vue對storejs取得資料進行處理的步奏詳解

vue對storejs取得資料進行處理的步奏詳解

php中世界最好的语言
發布: 2018-04-11 14:01:20
原創
2680 人瀏覽過

這次帶給大家vue對storejs取得資料處理的步奏詳解,vue對storejs取得資料處理的注意事項有哪些,以下就是實戰案例,一起來看一下。

具體程式碼如下所示:

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判断购物车中是否有存在内容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}
登入後複製

這時候印出來:

this.shopList 顯示的結果為 {ob: Observer}

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

<ul>
  <li v-for = "list in shopList" :key = "list.id">
    {{list}}
  </li>
</ul>
登入後複製

但如果此時我想對this.shopList中的數據進行處理,就會出現問題,此時如果你想遍歷循環該數據,就會出現意想不到的效果,因為此時打印this.shopList. length 顯示出來的結果為undefined。

遍歷物件有幾種方法:

# 1,最常用的 for循環 ,但此時length為undefined,該方法不可用;

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

# 3. jquery中也有遍歷物件的方法 $.each(this.shopList,function(n,i){})

你會發先第三種可以遍歷這個數據,那就可以實現數據的處理了。

但是如果你的this.shopList這個物件中又包含了一層物件呢? .each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問題了嗎?除了這個方法外,有種更好的方法:

created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      var shopList = store.get('shopCar')
      $.each(shopList,function(n,i){
        //处理数据。。。。。
      })
      this.shopList = shopList;
      console.log(this.shopList)
    }
  }
登入後複製

更簡單直接的方法是,將資料先賦值給一個變量,將資料處理成你想要的格式之後,再複製給this.shopList即可。

為什麼我們直接將資料賦值給this.shopList就不可以對資料進行處理了呢?

原因是當你將資料賦值給this.shopList,也就是實現了vue的資料的雙向綁定。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

在vuejs中使用v-show不起作用的原因有哪些

vue計算屬性詳解

#

以上是vue對storejs取得資料進行處理的步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板